diff --git a/app/docs.test.ts b/app/docs.test.ts
index 82d3a306..eaeb5bec 100644
--- a/app/docs.test.ts
+++ b/app/docs.test.ts
@@ -60,6 +60,38 @@ test("every package page contains installation, guide, and complete API sections
   }
 });
 
+test("UI components have a dedicated catalog and complete detail pages", () => {
+  const reference = JSON.parse(
+    readFileSync(join(root, "node_modules", "@wrnexus", "ui", "component-reference.json"), "utf8"),
+  ) as { count: number; components: Array<{ name: string; props: unknown[] }> };
+  const catalog = readFileSync(join(root, "app", "pages", "components.wrn"), "utf8");
+  const details = readdirSync(join(root, "app", "pages", "components")).filter((file) =>
+    file.endsWith(".wrn"),
+  );
+  expect(catalog).toContain(`@wrnexus/ui · ${reference.count} components`);
+  expect(catalog.match(/class="component-card"/g)).toHaveLength(reference.count);
+  expect(details).toHaveLength(reference.count);
+  const button = readFileSync(join(root, "app", "pages", "components", "button.wrn"), "utf8");
+  expect(button).toContain("Props and attributes");
+  expect(button).toContain("Requirement");
+  expect(button).toContain("Default");
+  expect(button).toContain('id="usage"');
+  expect(button).toContain('id="source"');
+  const uiPackage = readFileSync(join(packagePages, "ui.wrn"), "utf8");
+  expect(uiPackage).toContain('href="/components"');
+  expect(uiPackage).not.toContain("All 901 UI components and props");
+});
+
+test("primary navigation exposes the component catalog", () => {
+  for (const file of [
+    join(root, "app", "pages", "index.wrn"),
+    join(root, "app", "pages", "getting-started.wrn"),
+    join(root, "app", "pages", "packages", "core.wrn"),
+  ]) {
+    expect(readFileSync(file, "utf8")).toContain('<a href="/components">Components</a>');
+  }
+});
+
 test("every package page shows multiple named usage examples", () => {
   for (const name of expected) {
     const source = readFileSync(join(packagePages, `${name}.wrn`), "utf8");
diff --git a/app/pages/404.wrn b/app/pages/404.wrn
index 92953d2e..c19f52aa 100644
--- a/app/pages/404.wrn
+++ b/app/pages/404.wrn
@@ -7,8 +7,8 @@ page Pagenotfound {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Error</span><span aria-hidden="true">/</span><span aria-current="page">Page not found</span></nav><article class="documentation prose standalone"><span class="eyebrow">404</span><h1>Page not found</h1><p>The address may be outdated or misspelled. No private or duplicate route is exposed here.</p><div class="actions"><a class="primary" href="/search">Search documentation</a><a href="/getting-started">Getting started</a><a href="/packages">Package reference</a></div></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/access.wrn b/app/pages/access.wrn
index 011d4e69..82e4f693 100644
--- a/app/pages/access.wrn
+++ b/app/pages/access.wrn
@@ -7,8 +7,8 @@ page Access {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Status</span><span aria-hidden="true">/</span><span aria-current="page">Access</span></nav><article class="documentation prose standalone"><Badge class="status status-beta" label="Private Developer Preview" variant="info" /><h1>Request preview access</h1><p>WRNexusJS 0.2.64 packages are not available from the public npm registry. Installation requires approval and private registry credentials supplied by WorkRoot. Never paste registry tokens into source control, issue reports, or support messages.</p><h2>Request process</h2><ol><li>Contact WorkRoot through the public contact path at <a href="https://workroot.in/">workroot.in</a>.</li><li>Describe the application, team, expected deployment, and Bun environment.</li><li>After approval, follow the registry instructions supplied privately.</li><li>Use the canonical scaffold command below only after authentication.</li></ol><pre><code>bunx @wrnexus/cli@0.2.64 create my-app</code></pre><p>Access approval, response time, licensing terms, and support level remain owner-controlled. This site does not collect access requests directly.</p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/architecture.wrn b/app/pages/architecture.wrn
index 280acbbb..94f16a15 100644
--- a/app/pages/architecture.wrn
+++ b/app/pages/architecture.wrn
@@ -7,8 +7,8 @@ page Architecture {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Documentation</span><span aria-hidden="true">/</span><span aria-current="page">Architecture</span></nav><article class="documentation prose standalone"><span class="status status-beta">Framework architecture · 0.2.64</span><h1>Architecture</h1><p>WRNexusJS is Bun-native and SSR-first. File discovery maps pages and API handlers; middleware enriches or short-circuits a request; the compiler turns <code>.wrn</code> declarations into server render functions and small feature runtimes.</p><h2>Request and build lifecycle</h2><ol class="lifecycle"><li><strong>Discover</strong><span>Pages, APIs, middleware, components, layouts, schemas, rooms</span></li><li><strong>Compile</strong><span>Parse .wrn, validate grammar, generate server code</span></li><li><strong>Request</strong><span>Limits, security, locale, session, middleware</span></li><li><strong>Match</strong><span>Static and dynamic file route</span></li><li><strong>Render</strong><span>SSR data, escaped interpolation, components, metadata</span></li><li><strong>Enhance</strong><span>Only required reactive/directive runtimes</span></li></ol><h2>Package boundaries</h2><p><code>core</code> owns contexts, middleware, sessions and rooms; <code>router</code> discovers routes; <code>compiler</code> parses <code>.wrn</code>; <code>ssr</code> renders documents; <code>csr</code> supplies browser runtimes; <code>dev-server</code> and <code>cli</code> orchestrate development and builds.</p><h2>Security and data flow</h2><p>Validation happens at trust boundaries. Session authentication establishes identity; authorization makes resource decisions. CSP, Trusted Types, CSRF, upload checks, WebSocket origins, request limits, and output escaping are layered controls—not substitutes for application policy.</p><h2>Realtime and scale</h2><p>Rooms are process-local unless connected through pub/sub. Redis-backed pub/sub distributes events. Queue durability depends on the selected driver and must be evaluated explicitly.</p><h2>Workspaces and gateways</h2><p>The gateway can dispatch multiple applications while preserving route, component, asset, config, and session boundaries. Validate host routing and isolation before production.</p><h2>Build and deployment</h2><p><code>wrnexus build .</code> produces <code>dist/server.js</code> and hashed/static assets. Run the server with Bun, apply migrations before traffic, terminate TLS at a trusted edge, and forward only expected proxy headers.</p><h2>Mobile</h2><p>Mobile compatibility bridges SSR-safe Capacitor capabilities; native route generation is experimental and is not general web portability. Test each target platform.</p><h2>Generated files and limits</h2><p><code>app/routes.gen.ts</code>, <code>.wrnexus/</code>, and <code>dist/</code> are generated. The runtime is Bun-only. Preview packages are private. Historical compatibility and long-term support policy are not yet published.</p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/benchmarks.wrn b/app/pages/benchmarks.wrn
index 70e6279d..681b5358 100644
--- a/app/pages/benchmarks.wrn
+++ b/app/pages/benchmarks.wrn
@@ -7,8 +7,8 @@ page Benchmarks {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Project</span><span aria-hidden="true">/</span><span aria-current="page">Benchmarks</span></nav><article class="documentation prose standalone"><h1>Benchmarks</h1><span class="status status-planned">No publishable benchmark dataset yet</span><p>No comparative speed claims are published. A valid baseline must record scripts, commit, Bun/framework versions, hardware, OS, warmup, samples, workload, raw results, median, percentiles, memory, HTML size, browser JavaScript size, and run date.</p><p>The roadmap starts with WRNexusJS-only measurements before any maintained equivalent-workload comparison.</p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/changelog.wrn b/app/pages/changelog.wrn
index 1e19b92d..36ec0ff7 100644
--- a/app/pages/changelog.wrn
+++ b/app/pages/changelog.wrn
@@ -7,8 +7,8 @@ page Changelog {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Project</span><span aria-hidden="true">/</span><span aria-current="page">Changelog</span></nav><article class="documentation prose standalone"><h1>Changelog</h1><h2>0.2.64 <small>2026-07-13</small></h2><p>Documentation is aligned to all 26 installed packages. This release adds <code>@wrnexus/helpers</code>, original-request URL helpers, safe login redirects, working <code>wrnexus workspace add</code>, and forward-auth redirect propagation.</p><h3>Migration notes</h3><p>Run <code>wrnexus update --latest</code> and keep every <code>@wrnexus/*</code> package on 0.2.64. Existing applications must explicitly add <code>@wrnexus/helpers</code> before importing it; newly scaffolded applications include it automatically.</p><h2>Versioning and support</h2><p>The packages use semantic-looking versions, but a formal compatibility and old-release support policy has not been approved. Preview consumers should treat minor releases as potentially requiring migration review.</p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/components.wrn b/app/pages/components.wrn
new file mode 100644
index 00000000..0170699c
--- /dev/null
+++ b/app/pages/components.wrn
@@ -0,0 +1,923 @@
+page Components {
+  seo {
+    title = "Components"
+    description = "Browse all 901 themeable WRNexusJS UI components, props, slots, events, and examples."
+  }
+  state query = ""
+  state category = "All"
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main id="main" class="page component-catalog-page"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><span aria-current="page">Components</span></nav><section class="hero compact"><span class="eyebrow">@wrnexus/ui · 901 components</span><h1>Component reference</h1><p>Production-ready, server-rendered components documented directly from the installed <code>.wrn</code> sources.</p><input class="search" type="search" placeholder="Search components, props, or categories…" @input="query = event.target.value" /></section><section class="category-filter" aria-label="Filter components by category"><div class="category-row"><button type="button" @click="category = 'All'">All<span>901</span></button><button type="button" @click="category = 'actions'">Actions<span>64</span></button><button type="button" @click="category = 'content'">Content<span>255</span></button><button type="button" @click="category = 'core'">Core<span>67</span></button><button type="button" @click="category = 'data'">Data<span>79</span></button><button type="button" @click="category = 'feedback'">Feedback<span>72</span></button><button type="button" @click="category = 'forms'">Forms<span>211</span></button><button type="button" @click="category = 'layout'">Layout<span>74</span></button><button type="button" @click="category = 'overlays'">Overlays<span>33</span></button><button type="button" @click="category = 'visualization'">Visualization<span>46</span></button></div><p>Showing <strong>{category}</strong> components</p></section><section class="component-grid"><a class="component-card" href="/components/accept-all-cookies-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'acceptallcookiesbutton acceptallcookiesbutton actions reusable accept all cookies button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>AcceptAllCookiesButton</h2><p>Reusable accept all cookies button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/accessible-accordion" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accessibleaccordion accessibleaccordion content reusable accessible accordion component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AccessibleAccordion</h2><p>Reusable accessible accordion component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/accessible-carousel" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accessiblecarousel accessiblecarousel content reusable accessible carousel component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AccessibleCarousel</h2><p>Reusable accessible carousel component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/accessible-chart-summary" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accessiblechartsummary accessiblechartsummary content reusable accessible chart summary component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AccessibleChartSummary</h2><p>Reusable accessible chart summary component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/accessible-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'accessibledialog accessibledialog overlays reusable accessible dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>AccessibleDialog</h2><p>Reusable accessible dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/accessible-error-summary" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accessibleerrorsummary accessibleerrorsummary content reusable accessible error summary component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AccessibleErrorSummary</h2><p>Reusable accessible error summary component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/accessible-icon" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accessibleicon accessibleicon content reusable accessible icon component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AccessibleIcon</h2><p>Reusable accessible icon component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/accessible-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'accessiblemenu accessiblemenu overlays reusable accessible menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>AccessibleMenu</h2><p>Reusable accessible menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/accessible-tabs" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accessibletabs accessibletabs content reusable accessible tabs component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AccessibleTabs</h2><p>Reusable accessible tabs component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/accessible-tooltip" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accessibletooltip accessibletooltip content reusable accessible tooltip component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AccessibleTooltip</h2><p>Reusable accessible tooltip component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/accordion" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'accordion accordion content reusable accordion component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Accordion</h2><p>Reusable accordion component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/account-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'accountmenu accountmenu overlays reusable account menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>AccountMenu</h2><p>Reusable account menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/account-status-banner" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'accountstatusbanner accountstatusbanner feedback reusable account status banner component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>AccountStatusBanner</h2><p>Reusable account status banner component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/action-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'actionmenu actionmenu overlays reusable action menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ActionMenu</h2><p>Reusable action menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/active-filter-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'activefilterlist activefilterlist data reusable active filter list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ActiveFilterList</h2><p>Reusable active filter list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/activity-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'activitylist activitylist data reusable activity list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ActivityList</h2><p>Reusable activity list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/add-on-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'addoncard addoncard content reusable add on card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AddOnCard</h2><p>Reusable add on card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/address-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'addressinput addressinput forms reusable address input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>AddressInput</h2><p>Reusable address input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/address-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'addresspreview addresspreview content reusable address preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AddressPreview</h2><p>Reusable address preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/advanced-filter-builder" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'advancedfilterbuilder advancedfilterbuilder content reusable advanced filter builder component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AdvancedFilterBuilder</h2><p>Reusable advanced filter builder component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'alert alert feedback reusable alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>Alert</h2><p>Reusable alert component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/alert-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'alertdialog alertdialog overlays reusable alert dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>AlertDialog</h2><p>Reusable alert dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/amount-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'amountinput amountinput forms reusable amount input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>AmountInput</h2><p>Reusable amount input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/analytics-dashboard-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'analyticsdashboardpreview analyticsdashboardpreview content reusable analytics dashboard preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AnalyticsDashboardPreview</h2><p>Reusable analytics dashboard preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/anchor-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'anchornavigation anchornavigation layout reusable anchor navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>AnchorNavigation</h2><p>Reusable anchor navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/announcement-bar" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'announcementbar announcementbar core reusable announcement bar component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>AnnouncementBar</h2><p>Reusable announcement bar component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/apartment-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'apartmentinput apartmentinput forms reusable apartment input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ApartmentInput</h2><p>Reusable apartment input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/api-authentication-notice" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'apiauthenticationnotice apiauthenticationnotice feedback reusable api authentication notice component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ApiAuthenticationNotice</h2><p>Reusable api authentication notice component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/api-endpoint-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'apiendpointcard apiendpointcard content reusable api endpoint card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ApiEndpointCard</h2><p>Reusable api endpoint card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/api-error-example" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'apierrorexample apierrorexample content reusable api error example component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ApiErrorExample</h2><p>Reusable api error example component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/api-header-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'apiheadertable apiheadertable data reusable api header table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ApiHeaderTable</h2><p>Reusable api header table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/api-key-create-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'apikeycreatedialog apikeycreatedialog overlays reusable api key create dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ApiKeyCreateDialog</h2><p>Reusable api key create dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/api-key-display" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'apikeydisplay apikeydisplay content reusable api key display component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ApiKeyDisplay</h2><p>Reusable api key display component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/api-key-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'apikeyinput apikeyinput forms reusable api key input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ApiKeyInput</h2><p>Reusable api key input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/api-method-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'apimethodbadge apimethodbadge feedback reusable api method badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ApiMethodBadge</h2><p>Reusable api method badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/api-parameter-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'apiparametertable apiparametertable data reusable api parameter table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ApiParameterTable</h2><p>Reusable api parameter table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/api-rate-limit-notice" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'apiratelimitnotice apiratelimitnotice feedback reusable api rate limit notice component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ApiRateLimitNotice</h2><p>Reusable api rate limit notice component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/api-request-example" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'apirequestexample apirequestexample content reusable api request example component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ApiRequestExample</h2><p>Reusable api request example component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/api-response-example" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'apiresponseexample apiresponseexample content reusable api response example component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ApiResponseExample</h2><p>Reusable api response example component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/api-schema-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'apischematable apischematable data reusable api schema table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ApiSchemaTable</h2><p>Reusable api schema table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/api-schema-viewer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'apischemaviewer apischemaviewer content reusable api schema viewer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ApiSchemaViewer</h2><p>Reusable api schema viewer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/api-version-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'apiversionbadge apiversionbadge feedback reusable api version badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ApiVersionBadge</h2><p>Reusable api version badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/app-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'appheader appheader layout reusable app header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>AppHeader</h2><p>Reusable app header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/architecture-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'architecturesection architecturesection layout reusable architecture section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ArchitectureSection</h2><p>Reusable architecture section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/area-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'areachart areachart visualization reusable area chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>AreaChart</h2><p>Reusable area chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/article-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'articlehero articlehero layout reusable article hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ArticleHero</h2><p>Reusable article hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/article-layout" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'articlelayout articlelayout layout reusable article layout component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ArticleLayout</h2><p>Reusable article layout component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/article-newsletter-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'articlenewslettercta articlenewslettercta actions reusable article newsletter c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ArticleNewsletterCTA</h2><p>Reusable article newsletter c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/article-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'articlepageshell articlepageshell layout reusable article page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ArticlePageShell</h2><p>Reusable article page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/article-share-actions" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'articleshareactions articleshareactions actions reusable article share actions component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ArticleShareActions</h2><p>Reusable article share actions component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/aspect-ratio" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'aspectratio aspectratio core reusable aspect ratio component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>AspectRatio</h2><p>Reusable aspect ratio component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/asset-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'assetcard assetcard content reusable asset card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AssetCard</h2><p>Reusable asset card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/attachment-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'attachmentpicker attachmentpicker forms reusable attachment picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>AttachmentPicker</h2><p>Reusable attachment picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/attachment-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'attachmentupload attachmentupload content reusable attachment upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AttachmentUpload</h2><p>Reusable attachment upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/audio-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'audioupload audioupload content reusable audio upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AudioUpload</h2><p>Reusable audio upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/audit-log-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'auditlogpreview auditlogpreview content reusable audit log preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AuditLogPreview</h2><p>Reusable audit log preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/audit-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'audittable audittable data reusable audit table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>AuditTable</h2><p>Reusable audit table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/authenticator-code-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'authenticatorcodeinput authenticatorcodeinput forms reusable authenticator code input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>AuthenticatorCodeInput</h2><p>Reusable authenticator code input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/author-avatar" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'authoravatar authoravatar content reusable author avatar component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AuthorAvatar</h2><p>Reusable author avatar component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/author-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'authorcard authorcard content reusable author card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AuthorCard</h2><p>Reusable author card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/authorized-application-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'authorizedapplicationcard authorizedapplicationcard content reusable authorized application card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AuthorizedApplicationCard</h2><p>Reusable authorized application card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/auto-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'autogrid autogrid data reusable auto grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>AutoGrid</h2><p>Reusable auto grid component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/automation-example-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'automationexamplecard automationexamplecard content reusable automation example card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AutomationExampleCard</h2><p>Reusable automation example card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/availability-calendar" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'availabilitycalendar availabilitycalendar content reusable availability calendar component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AvailabilityCalendar</h2><p>Reusable availability calendar component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/avatar" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'avatar avatar content reusable avatar component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Avatar</h2><p>Reusable avatar component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/avatar-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'avatargroup avatargroup forms reusable avatar group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>AvatarGroup</h2><p>Reusable avatar group component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/avatar-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'avatarupload avatarupload content reusable avatar upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>AvatarUpload</h2><p>Reusable avatar upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/back-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'backbutton backbutton actions reusable back button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>BackButton</h2><p>Reusable back button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/back-to-top" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'backtotop backtotop core reusable back to top component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>BackToTop</h2><p>Reusable back to top component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'badge badge feedback reusable badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>Badge</h2><p>Reusable badge component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/bank-transfer-details" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'banktransferdetails banktransferdetails content reusable bank transfer details component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>BankTransferDetails</h2><p>Reusable bank transfer details component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/banner" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'banner banner feedback reusable banner component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>Banner</h2><p>Reusable banner component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/bar-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'barchart barchart visualization reusable bar chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>BarChart</h2><p>Reusable bar chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/beta-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'betabadge betabadge feedback reusable beta badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>BetaBadge</h2><p>Reusable beta badge component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/billing-address-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'billingaddressform billingaddressform content reusable billing address form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>BillingAddressForm</h2><p>Reusable billing address form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/billing-example" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'billingexample billingexample content reusable billing example component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>BillingExample</h2><p>Reusable billing example component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/billing-period-toggle" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'billingperiodtoggle billingperiodtoggle forms reusable billing period toggle component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>BillingPeriodToggle</h2><p>Reusable billing period toggle component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/blackout-date-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'blackoutdatepicker blackoutdatepicker forms reusable blackout date picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>BlackoutDatePicker</h2><p>Reusable blackout date picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/blog-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'blogcard blogcard content reusable blog card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>BlogCard</h2><p>Reusable blog card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/blog-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'bloggrid bloggrid data reusable blog grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>BlogGrid</h2><p>Reusable blog grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/blog-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'bloglist bloglist data reusable blog list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>BlogList</h2><p>Reusable blog list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/blog-search" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'blogsearch blogsearch content reusable blog search component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>BlogSearch</h2><p>Reusable blog search component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/body-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'bodytext bodytext content reusable body text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>BodyText</h2><p>Reusable body text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/border-radius-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'borderradiuspicker borderradiuspicker forms reusable border radius picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>BorderRadiusPicker</h2><p>Reusable border radius picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/bottom-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'bottomnavigation bottomnavigation layout reusable bottom navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>BottomNavigation</h2><p>Reusable bottom navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/brand-color-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'brandcolorpicker brandcolorpicker forms reusable brand color picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>BrandColorPicker</h2><p>Reusable brand color picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/brand-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'brandselector brandselector forms reusable brand selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>BrandSelector</h2><p>Reusable brand selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/breadcrumbs" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'breadcrumbs breadcrumbs core reusable breadcrumbs component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Breadcrumbs</h2><p>Reusable breadcrumbs component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/browser-frame" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'browserframe browserframe layout reusable browser frame component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>BrowserFrame</h2><p>Reusable browser frame component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/budget-range-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'budgetrangeslider budgetrangeslider content reusable budget range slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>BudgetRangeSlider</h2><p>Reusable budget range slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/budget-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'budgetselector budgetselector forms reusable budget selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>BudgetSelector</h2><p>Reusable budget selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/business-hours-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'businesshourspicker businesshourspicker forms reusable business hours picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>BusinessHoursPicker</h2><p>Reusable business hours picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'button button actions reusable button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>Button</h2><p>Reusable button component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/button-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'buttongroup buttongroup forms reusable button group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ButtonGroup</h2><p>Reusable button group component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/button-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'buttonselector buttonselector forms reusable button selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ButtonSelector</h2><p>Reusable button selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/calendar" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'calendar calendar content reusable calendar component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Calendar</h2><p>Reusable calendar component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/calendar-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'calendargrid calendargrid data reusable calendar grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>CalendarGrid</h2><p>Reusable calendar grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/calendar-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'calendarheader calendarheader layout reusable calendar header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CalendarHeader</h2><p>Reusable calendar header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/calendar-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'calendarnavigation calendarnavigation layout reusable calendar navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CalendarNavigation</h2><p>Reusable calendar navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/callback-url-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'callbackurlinput callbackurlinput forms reusable callback url input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CallbackUrlInput</h2><p>Reusable callback url input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/campaign-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'campaigncard campaigncard content reusable campaign card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CampaignCard</h2><p>Reusable campaign card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/campaign-performance-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'campaignperformancepreview campaignperformancepreview content reusable campaign performance preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CampaignPerformancePreview</h2><p>Reusable campaign performance preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/campaign-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'campaignprogress campaignprogress visualization reusable campaign progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>CampaignProgress</h2><p>Reusable campaign progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/capability-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'capabilitygrid capabilitygrid data reusable capability grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>CapabilityGrid</h2><p>Reusable capability grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/captcha-field" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'captchafield captchafield forms reusable captcha field component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CaptchaField</h2><p>Reusable captcha field component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'card card content reusable card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Card</h2><p>Reusable card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/card-payment-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'cardpaymentform cardpaymentform content reusable card payment form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CardPaymentForm</h2><p>Reusable card payment form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/card-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'cardselector cardselector forms reusable card selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CardSelector</h2><p>Reusable card selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/card-skeleton" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'cardskeleton cardskeleton feedback reusable card skeleton component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>CardSkeleton</h2><p>Reusable card skeleton component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/career-application-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'careerapplicationform careerapplicationform content reusable career application form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CareerApplicationForm</h2><p>Reusable career application form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/career-benefits-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'careerbenefitsgrid careerbenefitsgrid data reusable career benefits grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>CareerBenefitsGrid</h2><p>Reusable career benefits grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/carousel" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'carousel carousel content reusable carousel component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Carousel</h2><p>Reusable carousel component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/case-study-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'casestudycard casestudycard content reusable case study card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CaseStudyCard</h2><p>Reusable case study card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/case-study-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'casestudyhero casestudyhero layout reusable case study hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CaseStudyHero</h2><p>Reusable case study hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/case-study-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'casestudypreview casestudypreview content reusable case study preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CaseStudyPreview</h2><p>Reusable case study preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/centered-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'centeredcta centeredcta actions reusable centered c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>CenteredCTA</h2><p>Reusable centered c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/centered-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'centeredhero centeredhero layout reusable centered hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CenteredHero</h2><p>Reusable centered hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/centered-section-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'centeredsectionheader centeredsectionheader layout reusable centered section header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CenteredSectionHeader</h2><p>Reusable centered section header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/certificate-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'certificateupload certificateupload content reusable certificate upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CertificateUpload</h2><p>Reusable certificate upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/certification-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'certificationbadge certificationbadge feedback reusable certification badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>CertificationBadge</h2><p>Reusable certification badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/challenge-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'challengesection challengesection layout reusable challenge section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ChallengeSection</h2><p>Reusable challenge section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/channel-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'channelbadge channelbadge feedback reusable channel badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ChannelBadge</h2><p>Reusable channel badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/channel-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'channelcard channelcard content reusable channel card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ChannelCard</h2><p>Reusable channel card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/channel-comparison-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'channelcomparisonchart channelcomparisonchart visualization reusable channel comparison chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ChannelComparisonChart</h2><p>Reusable channel comparison chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/channel-comparison-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'channelcomparisontable channelcomparisontable data reusable channel comparison table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ChannelComparisonTable</h2><p>Reusable channel comparison table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/channel-fallback-diagram" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'channelfallbackdiagram channelfallbackdiagram visualization reusable channel fallback diagram component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ChannelFallbackDiagram</h2><p>Reusable channel fallback diagram component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/channel-flow" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'channelflow channelflow visualization reusable channel flow component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ChannelFlow</h2><p>Reusable channel flow component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/channel-icon" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'channelicon channelicon content reusable channel icon component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ChannelIcon</h2><p>Reusable channel icon component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/channel-rate-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'channelratetable channelratetable data reusable channel rate table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ChannelRateTable</h2><p>Reusable channel rate table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/channel-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'channelselector channelselector forms reusable channel selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ChannelSelector</h2><p>Reusable channel selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/character-counter" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'charactercounter charactercounter feedback reusable character counter component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>CharacterCounter</h2><p>Reusable character counter component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/chart-empty-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'chartemptystate chartemptystate feedback reusable chart empty state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ChartEmptyState</h2><p>Reusable chart empty state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/chart-tooltip" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'charttooltip charttooltip content reusable chart tooltip component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ChartTooltip</h2><p>Reusable chart tooltip component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/checkbox" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'checkbox checkbox core reusable checkbox component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Checkbox</h2><p>Reusable checkbox component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/checkbox-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'checkboxgroup checkboxgroup forms reusable checkbox group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CheckboxGroup</h2><p>Reusable checkbox group component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/checklist" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'checklist checklist content reusable checklist component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Checklist</h2><p>Reusable checklist component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/checklist-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'checklistprogress checklistprogress visualization reusable checklist progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ChecklistProgress</h2><p>Reusable checklist progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/chip" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'chip chip core reusable chip component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Chip</h2><p>Reusable chip component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/chip-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'chipinput chipinput forms reusable chip input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ChipInput</h2><p>Reusable chip input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/circular-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'circularprogress circularprogress visualization reusable circular progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>CircularProgress</h2><p>Reusable circular progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/city-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'cityselector cityselector forms reusable city selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CitySelector</h2><p>Reusable city selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/clear-filters-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'clearfiltersbutton clearfiltersbutton actions reusable clear filters button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ClearFiltersButton</h2><p>Reusable clear filters button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/clickable-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'clickablecard clickablecard content reusable clickable card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ClickableCard</h2><p>Reusable clickable card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/close-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'closebutton closebutton actions reusable close button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>CloseButton</h2><p>Reusable close button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/cluster" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'cluster cluster core reusable cluster component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Cluster</h2><p>Reusable cluster component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/code" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'code code content reusable code component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Code</h2><p>Reusable code component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/code-block" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'codeblock codeblock content reusable code block component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CodeBlock</h2><p>Reusable code block component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/code-copy-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'codecopybutton codecopybutton actions reusable code copy button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>CodeCopyButton</h2><p>Reusable code copy button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/code-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'codeheader codeheader layout reusable code header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CodeHeader</h2><p>Reusable code header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/code-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'codeinput codeinput forms reusable code input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CodeInput</h2><p>Reusable code input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/code-language-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'codelanguagebadge codelanguagebadge feedback reusable code language badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>CodeLanguageBadge</h2><p>Reusable code language badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/code-tabs" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'codetabs codetabs content reusable code tabs component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CodeTabs</h2><p>Reusable code tabs component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/code-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'codetext codetext content reusable code text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CodeText</h2><p>Reusable code text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/cohort-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'cohortchart cohortchart visualization reusable cohort chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>CohortChart</h2><p>Reusable cohort chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/color-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'colorgrid colorgrid data reusable color grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ColorGrid</h2><p>Reusable color grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/color-hex-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'colorhexinput colorhexinput forms reusable color hex input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ColorHexInput</h2><p>Reusable color hex input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/color-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'colorpicker colorpicker forms reusable color picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ColorPicker</h2><p>Reusable color picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/color-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'colorselector colorselector forms reusable color selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ColorSelector</h2><p>Reusable color selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/color-swatch" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'colorswatch colorswatch content reusable color swatch component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ColorSwatch</h2><p>Reusable color swatch component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/combobox" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'combobox combobox core reusable combobox component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Combobox</h2><p>Reusable combobox component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/coming-soon-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'comingsoonbadge comingsoonbadge feedback reusable coming soon badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ComingSoonBadge</h2><p>Reusable coming soon badge component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/coming-soon-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'comingsoonstate comingsoonstate feedback reusable coming soon state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ComingSoonState</h2><p>Reusable coming soon state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/command-block" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'commandblock commandblock content reusable command block component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CommandBlock</h2><p>Reusable command block component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/command-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'commandmenu commandmenu overlays reusable command menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>CommandMenu</h2><p>Reusable command menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/command-search-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'commandsearchinput commandsearchinput forms reusable command search input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CommandSearchInput</h2><p>Reusable command search input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/company-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'companyhero companyhero layout reusable company hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CompanyHero</h2><p>Reusable company hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/company-name-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'companynameinput companynameinput forms reusable company name input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CompanyNameInput</h2><p>Reusable company name input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/company-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'companypageshell companypageshell layout reusable company page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CompanyPageShell</h2><p>Reusable company page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/company-size-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'companysizeselector companysizeselector forms reusable company size selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CompanySizeSelector</h2><p>Reusable company size selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/comparison-date-range-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'comparisondaterangepicker comparisondaterangepicker forms reusable comparison date range picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ComparisonDateRangePicker</h2><p>Reusable comparison date range picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/comparison-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'comparisontable comparisontable data reusable comparison table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ComparisonTable</h2><p>Reusable comparison table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/completion-meter" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'completionmeter completionmeter visualization reusable completion meter component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>CompletionMeter</h2><p>Reusable completion meter component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/compliance-badge-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'compliancebadgelist compliancebadgelist data reusable compliance badge list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ComplianceBadgeList</h2><p>Reusable compliance badge list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/compliance-program-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'complianceprogramcard complianceprogramcard content reusable compliance program card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ComplianceProgramCard</h2><p>Reusable compliance program card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/confirmation-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'confirmationdialog confirmationdialog overlays reusable confirmation dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ConfirmationDialog</h2><p>Reusable confirmation dialog component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/confirm-password-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'confirmpasswordinput confirmpasswordinput forms reusable confirm password input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ConfirmPasswordInput</h2><p>Reusable confirm password input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/connected-account-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'connectedaccountcard connectedaccountcard content reusable connected account card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ConnectedAccountCard</h2><p>Reusable connected account card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/connection-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'connectioncard connectioncard content reusable connection card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ConnectionCard</h2><p>Reusable connection card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/consent-timeline-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'consenttimelinepreview consenttimelinepreview content reusable consent timeline preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ConsentTimelinePreview</h2><p>Reusable consent timeline preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/contact-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'contactcard contactcard content reusable contact card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ContactCard</h2><p>Reusable contact card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/contact-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'contactcta contactcta actions reusable contact c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ContactCTA</h2><p>Reusable contact c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/contact-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'contactform contactform content reusable contact form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ContactForm</h2><p>Reusable contact form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/contact-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'contacthero contacthero layout reusable contact hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ContactHero</h2><p>Reusable contact hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/contact-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'contactpageshell contactpageshell layout reusable contact page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ContactPageShell</h2><p>Reusable contact page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/contact-sales-banner" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'contactsalesbanner contactsalesbanner core reusable contact sales banner component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>ContactSalesBanner</h2><p>Reusable contact sales banner component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/contact-sales-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'contactsalesbutton contactsalesbutton actions reusable contact sales button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ContactSalesButton</h2><p>Reusable contact sales button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/contact-sales-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'contactsalesform contactsalesform content reusable contact sales form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ContactSalesForm</h2><p>Reusable contact sales form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/container" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'container container core reusable container component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Container</h2><p>Reusable container component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/context-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'contextmenu contextmenu overlays reusable context menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ContextMenu</h2><p>Reusable context menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/context-switcher" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'contextswitcher contextswitcher content reusable context switcher component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ContextSwitcher</h2><p>Reusable context switcher component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/conversation-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'conversationlist conversationlist data reusable conversation list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ConversationList</h2><p>Reusable conversation list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/conversation-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'conversationpreview conversationpreview content reusable conversation preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ConversationPreview</h2><p>Reusable conversation preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/conversion-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'conversionchart conversionchart visualization reusable conversion chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ConversionChart</h2><p>Reusable conversion chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/cookie-banner" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'cookiebanner cookiebanner feedback reusable cookie banner component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>CookieBanner</h2><p>Reusable cookie banner component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/cookie-category-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'cookiecategorylist cookiecategorylist data reusable cookie category list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>CookieCategoryList</h2><p>Reusable cookie category list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/cookie-category-toggle" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'cookiecategorytoggle cookiecategorytoggle forms reusable cookie category toggle component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CookieCategoryToggle</h2><p>Reusable cookie category toggle component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/cookie-consent" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'cookieconsent cookieconsent core reusable cookie consent component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>CookieConsent</h2><p>Reusable cookie consent component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/cookie-details-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'cookiedetailstable cookiedetailstable data reusable cookie details table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>CookieDetailsTable</h2><p>Reusable cookie details table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/cookie-preferences-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'cookiepreferencesdialog cookiepreferencesdialog overlays reusable cookie preferences dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>CookiePreferencesDialog</h2><p>Reusable cookie preferences dialog component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/cookie-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'cookietable cookietable data reusable cookie table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>CookieTable</h2><p>Reusable cookie table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/coordinates-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'coordinatesinput coordinatesinput forms reusable coordinates input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CoordinatesInput</h2><p>Reusable coordinates input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/coordinates-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'coordinatespicker coordinatespicker forms reusable coordinates picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CoordinatesPicker</h2><p>Reusable coordinates picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/copy-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'copybutton copybutton actions reusable copy button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>CopyButton</h2><p>Reusable copy button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/copy-code-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'copycodebutton copycodebutton actions reusable copy code button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>CopyCodeButton</h2><p>Reusable copy code button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/copy-secret-field" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'copysecretfield copysecretfield forms reusable copy secret field component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CopySecretField</h2><p>Reusable copy secret field component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/cost-breakdown-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'costbreakdownchart costbreakdownchart visualization reusable cost breakdown chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>CostBreakdownChart</h2><p>Reusable cost breakdown chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/cost-summary" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'costsummary costsummary content reusable cost summary component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CostSummary</h2><p>Reusable cost summary component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/counter" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'counter counter feedback reusable counter component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>Counter</h2><p>Reusable counter component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/country-calling-code-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'countrycallingcodeinput countrycallingcodeinput forms reusable country calling code input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CountryCallingCodeInput</h2><p>Reusable country calling code input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/country-calling-code-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'countrycallingcodeselector countrycallingcodeselector forms reusable country calling code selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CountryCallingCodeSelector</h2><p>Reusable country calling code selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/country-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'countryselector countryselector forms reusable country selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CountrySelector</h2><p>Reusable country selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/coupon-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'couponinput couponinput forms reusable coupon input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CouponInput</h2><p>Reusable coupon input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/credit-amount-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'creditamountinput creditamountinput forms reusable credit amount input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CreditAmountInput</h2><p>Reusable credit amount input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/cron-builder" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'cronbuilder cronbuilder content reusable cron builder component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CronBuilder</h2><p>Reusable cron builder component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/cron-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'croninput croninput forms reusable cron input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CronInput</h2><p>Reusable cron input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/csv-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'csvupload csvupload content reusable csv upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CsvUpload</h2><p>Reusable csv upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/ctasection" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'ctasection ctasection layout reusable c t a section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CTASection</h2><p>Reusable c t a section component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/currency-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'currencyinput currencyinput forms reusable currency input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CurrencyInput</h2><p>Reusable currency input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/currency-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'currencyselector currencyselector forms reusable currency selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CurrencySelector</h2><p>Reusable currency selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/current-password-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'currentpasswordinput currentpasswordinput forms reusable current password input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>CurrentPasswordInput</h2><p>Reusable current password input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/customer-logo" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'customerlogo customerlogo content reusable customer logo component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CustomerLogo</h2><p>Reusable customer logo component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/customer-story-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'customerstorycard customerstorycard content reusable customer story card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>CustomerStoryCard</h2><p>Reusable customer story card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/danger-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'dangerbutton dangerbutton actions reusable danger button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>DangerButton</h2><p>Reusable danger button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/data-protection-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'dataprotectioncard dataprotectioncard content reusable data protection card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DataProtectionCard</h2><p>Reusable data protection card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/data-retention-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'dataretentiontable dataretentiontable data reusable data retention table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>DataRetentionTable</h2><p>Reusable data retention table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/data-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'datatable datatable data reusable data table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>DataTable</h2><p>Reusable data table component.</p><div class="component-card-meta"><span>6 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/date-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'dateinput dateinput forms reusable date input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DateInput</h2><p>Reusable date input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/date-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'datepicker datepicker forms reusable date picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DatePicker</h2><p>Reusable date picker component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/date-range-calendar" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'daterangecalendar daterangecalendar content reusable date range calendar component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DateRangeCalendar</h2><p>Reusable date range calendar component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/date-range-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'daterangepicker daterangepicker forms reusable date range picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DateRangePicker</h2><p>Reusable date range picker component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/date-range-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'daterangeslider daterangeslider content reusable date range slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DateRangeSlider</h2><p>Reusable date range slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/date-time-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'datetimeinput datetimeinput forms reusable date time input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DateTimeInput</h2><p>Reusable date time input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/date-time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'datetimepicker datetimepicker forms reusable date time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DateTimePicker</h2><p>Reusable date time picker component.</p><div class="component-card-meta"><span>9 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/date-time-range-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'datetimerangepicker datetimerangepicker forms reusable date time range picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DateTimeRangePicker</h2><p>Reusable date time range picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/decimal-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'decimalinput decimalinput forms reusable decimal input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DecimalInput</h2><p>Reusable decimal input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/definition-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'definitionlist definitionlist data reusable definition list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>DefinitionList</h2><p>Reusable definition list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/delete-confirmation-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'deleteconfirmationdialog deleteconfirmationdialog overlays reusable delete confirmation dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>DeleteConfirmationDialog</h2><p>Reusable delete confirmation dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/delivery-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'deliverypreview deliverypreview content reusable delivery preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DeliveryPreview</h2><p>Reusable delivery preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/delivery-status-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'deliverystatuschart deliverystatuschart visualization reusable delivery status chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>DeliveryStatusChart</h2><p>Reusable delivery status chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/delivery-status-timeline" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'deliverystatustimeline deliverystatustimeline visualization reusable delivery status timeline component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>DeliveryStatusTimeline</h2><p>Reusable delivery status timeline component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/demo-request-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'demorequestform demorequestform content reusable demo request form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DemoRequestForm</h2><p>Reusable demo request form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/department-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'departmentinput departmentinput forms reusable department input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DepartmentInput</h2><p>Reusable department input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/deprecated-feature-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'deprecatedfeaturealert deprecatedfeaturealert feedback reusable deprecated feature alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>DeprecatedFeatureAlert</h2><p>Reusable deprecated feature alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/description-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'descriptionlist descriptionlist data reusable description list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>DescriptionList</h2><p>Reusable description list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/desktop-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'desktopnavigation desktopnavigation layout reusable desktop navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>DesktopNavigation</h2><p>Reusable desktop navigation component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/developer-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'developercta developercta actions reusable developer c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>DeveloperCTA</h2><p>Reusable developer c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/developer-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'developerhero developerhero layout reusable developer hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>DeveloperHero</h2><p>Reusable developer hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/developer-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'developerpageshell developerpageshell layout reusable developer page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>DeveloperPageShell</h2><p>Reusable developer page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/developer-search" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'developersearch developersearch content reusable developer search component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DeveloperSearch</h2><p>Reusable developer search component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/developers-mega-menu" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'developersmegamenu developersmegamenu core reusable developers mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>DevelopersMegaMenu</h2><p>Reusable developers mega menu component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/developers-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'developersmenu developersmenu overlays reusable developers menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>DevelopersMenu</h2><p>Reusable developers menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/device-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'devicecard devicecard content reusable device card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DeviceCard</h2><p>Reusable device card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/disclosure" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'disclosure disclosure core reusable disclosure component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>disclosure</h2><p>Reusable disclosure component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/discount-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'discountinput discountinput forms reusable discount input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DiscountInput</h2><p>Reusable discount input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/display-heading" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'displayheading displayheading core reusable display heading component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>DisplayHeading</h2><p>Reusable display heading component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/display-name-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'displaynameinput displaynameinput forms reusable display name input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DisplayNameInput</h2><p>Reusable display name input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/divider" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'divider divider core reusable divider component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Divider</h2><p>Reusable divider component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/document-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'documentpreview documentpreview content reusable document preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DocumentPreview</h2><p>Reusable document preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/document-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'documentupload documentupload content reusable document upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DocumentUpload</h2><p>Reusable document upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/domain-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'domaininput domaininput forms reusable domain input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DomainInput</h2><p>Reusable domain input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/do-not-sell-link" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'donotselllink donotselllink actions reusable do not sell link component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>DoNotSellLink</h2><p>Reusable do not sell link component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/donut-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'donutchart donutchart visualization reusable donut chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>DonutChart</h2><p>Reusable donut chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/download-action" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'downloadaction downloadaction actions reusable download action component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>DownloadAction</h2><p>Reusable download action component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/download-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'downloadbutton downloadbutton actions reusable download button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>DownloadButton</h2><p>Reusable download button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/download-gate-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'downloadgateform downloadgateform content reusable download gate form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DownloadGateForm</h2><p>Reusable download gate form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/download-policy-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'downloadpolicybutton downloadpolicybutton actions reusable download policy button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>DownloadPolicyButton</h2><p>Reusable download policy button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/download-resource-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'downloadresourceform downloadresourceform content reusable download resource form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DownloadResourceForm</h2><p>Reusable download resource form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/drawer" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'drawer drawer core reusable drawer component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Drawer</h2><p>Reusable drawer component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/dropdown-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'dropdownmenu dropdownmenu overlays reusable dropdown menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>DropdownMenu</h2><p>Reusable dropdown menu component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/dropdown-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'dropdownnavigation dropdownnavigation layout reusable dropdown navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>DropdownNavigation</h2><p>Reusable dropdown navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/duration-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'durationinput durationinput forms reusable duration input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DurationInput</h2><p>Reusable duration input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/duration-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'durationpicker durationpicker forms reusable duration picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>DurationPicker</h2><p>Reusable duration picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/duration-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'durationslider durationslider content reusable duration slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>DurationSlider</h2><p>Reusable duration slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/elevated-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'elevatedcard elevatedcard content reusable elevated card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ElevatedCard</h2><p>Reusable elevated card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/email-body-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'emailbodyeditor emailbodyeditor forms reusable email body editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>EmailBodyEditor</h2><p>Reusable email body editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/email-composer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'emailcomposer emailcomposer content reusable email composer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>EmailComposer</h2><p>Reusable email composer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/email-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'emailinput emailinput forms reusable email input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>EmailInput</h2><p>Reusable email input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/emoji-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'emojipicker emojipicker forms reusable emoji picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>EmojiPicker</h2><p>Reusable emoji picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/empty-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'emptystate emptystate feedback reusable empty state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>EmptyState</h2><p>Reusable empty state component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/encryption-diagram" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'encryptiondiagram encryptiondiagram visualization reusable encryption diagram component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>EncryptionDiagram</h2><p>Reusable encryption diagram component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/enterprise-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'enterprisecta enterprisecta actions reusable enterprise c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>EnterpriseCTA</h2><p>Reusable enterprise c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/enterprise-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'enterprisehero enterprisehero layout reusable enterprise hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>EnterpriseHero</h2><p>Reusable enterprise hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/enterprise-pricing-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'enterprisepricingcard enterprisepricingcard content reusable enterprise pricing card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>EnterprisePricingCard</h2><p>Reusable enterprise pricing card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/environment-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'environmentselector environmentselector forms reusable environment selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>EnvironmentSelector</h2><p>Reusable environment selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/environment-switcher" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'environmentswitcher environmentswitcher content reusable environment switcher component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>EnvironmentSwitcher</h2><p>Reusable environment switcher component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/error-actions" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'erroractions erroractions actions reusable error actions component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ErrorActions</h2><p>Reusable error actions component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/error-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'errorcard errorcard content reusable error card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ErrorCard</h2><p>Reusable error card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/error-code" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'errorcode errorcode content reusable error code component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ErrorCode</h2><p>Reusable error code component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/error-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'errorhero errorhero layout reusable error hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ErrorHero</h2><p>Reusable error hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/error-illustration" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'errorillustration errorillustration content reusable error illustration component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ErrorIllustration</h2><p>Reusable error illustration component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/error-page" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'errorpage errorpage content reusable error page component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ErrorPage</h2><p>Reusable error page component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/error-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'errorpageshell errorpageshell layout reusable error page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ErrorPageShell</h2><p>Reusable error page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/error-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'errorstate errorstate feedback reusable error state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ErrorState</h2><p>Reusable error state component.</p><div class="component-card-meta"><span>16 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/error-support-link" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'errorsupportlink errorsupportlink actions reusable error support link component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ErrorSupportLink</h2><p>Reusable error support link component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/estimated-cost-summary" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'estimatedcostsummary estimatedcostsummary content reusable estimated cost summary component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>EstimatedCostSummary</h2><p>Reusable estimated cost summary component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/event-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'eventtable eventtable data reusable event table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>EventTable</h2><p>Reusable event table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/expandable-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'expandabletext expandabletext content reusable expandable text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ExpandableText</h2><p>Reusable expandable text component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/expiry-date-time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'expirydatetimepicker expirydatetimepicker forms reusable expiry date time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ExpiryDateTimePicker</h2><p>Reusable expiry date time picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/export-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'exportprogress exportprogress visualization reusable export progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ExportProgress</h2><p>Reusable export progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/external-link" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'externallink externallink actions reusable external link component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ExternalLink</h2><p>Reusable external link component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/eyebrow-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'eyebrowtext eyebrowtext content reusable eyebrow text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>EyebrowText</h2><p>Reusable eyebrow text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/factor-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'factorcard factorcard content reusable factor card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FactorCard</h2><p>Reusable factor card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/fallback-route-builder" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'fallbackroutebuilder fallbackroutebuilder content reusable fallback route builder component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FallbackRouteBuilder</h2><p>Reusable fallback route builder component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/fallback-route-diagram" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'fallbackroutediagram fallbackroutediagram visualization reusable fallback route diagram component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>FallbackRouteDiagram</h2><p>Reusable fallback route diagram component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/faq" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'faq faq core reusable faq component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>FAQ</h2><p>Reusable faq component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/faqaccordion" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'faqaccordion faqaccordion core reusable faqaccordion component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>FAQAccordion</h2><p>Reusable faqaccordion component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/favicon-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'faviconupload faviconupload content reusable favicon upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FaviconUpload</h2><p>Reusable favicon upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/fax-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'faxinput faxinput forms reusable fax input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FaxInput</h2><p>Reusable fax input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/feature-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'featurecard featurecard content reusable feature card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FeatureCard</h2><p>Reusable feature card component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/feature-checklist" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'featurechecklist featurechecklist content reusable feature checklist component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FeatureChecklist</h2><p>Reusable feature checklist component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/feature-comparison-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'featurecomparisontable featurecomparisontable data reusable feature comparison table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>FeatureComparisonTable</h2><p>Reusable feature comparison table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/featured-blog-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'featuredblogcard featuredblogcard content reusable featured blog card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FeaturedBlogCard</h2><p>Reusable featured blog card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/feature-details-panel" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'featuredetailspanel featuredetailspanel layout reusable feature details panel component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>FeatureDetailsPanel</h2><p>Reusable feature details panel component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/feature-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'featuregrid featuregrid data reusable feature grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>FeatureGrid</h2><p>Reusable feature grid component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/feature-icon-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'featureiconcard featureiconcard content reusable feature icon card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FeatureIconCard</h2><p>Reusable feature icon card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/feature-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'featurelist featurelist data reusable feature list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>FeatureList</h2><p>Reusable feature list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/feature-tabs" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'featuretabs featuretabs content reusable feature tabs component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FeatureTabs</h2><p>Reusable feature tabs component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/feature-timeline" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'featuretimeline featuretimeline visualization reusable feature timeline component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>FeatureTimeline</h2><p>Reusable feature timeline component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/feature-unavailable-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'featureunavailablestate featureunavailablestate feedback reusable feature unavailable state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>FeatureUnavailableState</h2><p>Reusable feature unavailable state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/field-actions" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'fieldactions fieldactions actions reusable field actions component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>FieldActions</h2><p>Reusable field actions component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/file-upload-primitive" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'file-upload file-upload core reusable file-upload component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>file-upload</h2><p>Reusable file-upload component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/file-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'fileinput fileinput forms reusable file input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FileInput</h2><p>Reusable file input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/file-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'filelist filelist data reusable file list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>FileList</h2><p>Reusable file list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/file-size-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'filesizeinput filesizeinput forms reusable file size input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FileSizeInput</h2><p>Reusable file size input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/file-size-label" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'filesizelabel filesizelabel content reusable file size label component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FileSizeLabel</h2><p>Reusable file size label component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/file-type-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'filetypebadge filetypebadge feedback reusable file type badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>FileTypeBadge</h2><p>Reusable file type badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/file-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'fileupload fileupload content reusable file upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FileUpload</h2><p>Reusable file upload component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/filterable-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'filterabletable filterabletable data reusable filterable table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>FilterableTable</h2><p>Reusable filterable table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/filter-bar" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'filterbar filterbar core reusable filter bar component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>FilterBar</h2><p>Reusable filter bar component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/filter-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'filtermenu filtermenu overlays reusable filter menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>FilterMenu</h2><p>Reusable filter menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/filter-search-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'filtersearchinput filtersearchinput forms reusable filter search input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FilterSearchInput</h2><p>Reusable filter search input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/final-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'finalcta finalcta actions reusable final c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>FinalCTA</h2><p>Reusable final c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/first-name-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'firstnameinput firstnameinput forms reusable first name input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FirstNameInput</h2><p>Reusable first name input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/flex" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'flex flex core reusable flex component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Flex</h2><p>Reusable flex component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/font-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'fontpicker fontpicker forms reusable font picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FontPicker</h2><p>Reusable font picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/font-size-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'fontsizepicker fontsizepicker forms reusable font size picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FontSizePicker</h2><p>Reusable font size picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/font-weight-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'fontweightpicker fontweightpicker forms reusable font weight picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FontWeightPicker</h2><p>Reusable font weight picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/footer-language-switcher" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'footerlanguageswitcher footerlanguageswitcher content reusable footer language switcher component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FooterLanguageSwitcher</h2><p>Reusable footer language switcher component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/footer-status-indicator" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'footerstatusindicator footerstatusindicator feedback reusable footer status indicator component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>FooterStatusIndicator</h2><p>Reusable footer status indicator component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/forbidden-page" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'forbiddenpage forbiddenpage content reusable forbidden page component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ForbiddenPage</h2><p>Reusable forbidden page component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/forbidden-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'forbiddenstate forbiddenstate feedback reusable forbidden state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ForbiddenState</h2><p>Reusable forbidden state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/forgot-password-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'forgotpasswordform forgotpasswordform content reusable forgot password form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ForgotPasswordForm</h2><p>Reusable forgot password form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'form form content reusable form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Form</h2><p>Reusable form component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/form-actions" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'formactions formactions actions reusable form actions component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>FormActions</h2><p>Reusable form actions component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/form-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'formalert formalert feedback reusable form alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>FormAlert</h2><p>Reusable form alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/form-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'formdialog formdialog overlays reusable form dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>FormDialog</h2><p>Reusable form dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/form-error" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'formerror formerror core reusable form error component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>FormError</h2><p>Reusable form error component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/form-error-summary" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'formerrorsummary formerrorsummary content reusable form error summary component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FormErrorSummary</h2><p>Reusable form error summary component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/form-field" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'formfield formfield forms reusable form field component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FormField</h2><p>Reusable form field component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/form-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'formgrid formgrid data reusable form grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>FormGrid</h2><p>Reusable form grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/form-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'formgroup formgroup forms reusable form group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FormGroup</h2><p>Reusable form group component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/form-help-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'formhelptext formhelptext content reusable form help text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FormHelpText</h2><p>Reusable form help text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/form-label" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'formlabel formlabel content reusable form label component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>FormLabel</h2><p>Reusable form label component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/form-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'formprogress formprogress visualization reusable form progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>FormProgress</h2><p>Reusable form progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/form-row" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'formrow formrow data reusable form row component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>FormRow</h2><p>Reusable form row component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/form-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'formsection formsection layout reusable form section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>FormSection</h2><p>Reusable form section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/full-bleed" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'fullbleed fullbleed core reusable full bleed component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>FullBleed</h2><p>Reusable full bleed component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/fullscreen-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'fullscreendialog fullscreendialog overlays reusable fullscreen dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>FullscreenDialog</h2><p>Reusable fullscreen dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/funnel-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'funnelchart funnelchart visualization reusable funnel chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>FunnelChart</h2><p>Reusable funnel chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/geo-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'geochart geochart visualization reusable geo chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>GeoChart</h2><p>Reusable geo chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/geofence-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'geofenceeditor geofenceeditor forms reusable geofence editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>GeofenceEditor</h2><p>Reusable geofence editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/ghost-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'ghostbutton ghostbutton actions reusable ghost button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>GhostButton</h2><p>Reusable ghost button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/glass-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'glasscard glasscard content reusable glass card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>GlassCard</h2><p>Reusable glass card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/global-search" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'globalsearch globalsearch content reusable global search component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>GlobalSearch</h2><p>Reusable global search component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/gradient-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'gradientcta gradientcta actions reusable gradient c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>GradientCTA</h2><p>Reusable gradient c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/gradient-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'gradientpicker gradientpicker forms reusable gradient picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>GradientPicker</h2><p>Reusable gradient picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/gradient-stop-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'gradientstopeditor gradientstopeditor forms reusable gradient stop editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>GradientStopEditor</h2><p>Reusable gradient stop editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'grid grid data reusable grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>Grid</h2><p>Reusable grid component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/guide-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'guidecard guidecard content reusable guide card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>GuideCard</h2><p>Reusable guide card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/guide-checklist" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'guidechecklist guidechecklist content reusable guide checklist component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>GuideChecklist</h2><p>Reusable guide checklist component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/guide-difficulty-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'guidedifficultybadge guidedifficultybadge feedback reusable guide difficulty badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>GuideDifficultyBadge</h2><p>Reusable guide difficulty badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/guide-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'guidegrid guidegrid data reusable guide grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>GuideGrid</h2><p>Reusable guide grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/guide-step" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'guidestep guidestep content reusable guide step component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>GuideStep</h2><p>Reusable guide step component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'header header layout reusable header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Header</h2><p>Reusable header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/header-actions" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'headeractions headeractions actions reusable header actions component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>HeaderActions</h2><p>Reusable header actions component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/health-indicator" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'healthindicator healthindicator feedback reusable health indicator component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>HealthIndicator</h2><p>Reusable health indicator component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'hero hero layout reusable hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Hero</h2><p>Reusable hero component.</p><div class="component-card-meta"><span>10 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/hero-actions" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'heroactions heroactions actions reusable hero actions component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>HeroActions</h2><p>Reusable hero actions component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/hero-code-panel" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'herocodepanel herocodepanel layout reusable hero code panel component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>HeroCodePanel</h2><p>Reusable hero code panel component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/hero-gradient-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'herogradienttext herogradienttext content reusable hero gradient text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>HeroGradientText</h2><p>Reusable hero gradient text component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/hero-primary-action" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'heroprimaryaction heroprimaryaction actions reusable hero primary action component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>HeroPrimaryAction</h2><p>Reusable hero primary action component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/hero-product-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'heroproductpreview heroproductpreview content reusable hero product preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>HeroProductPreview</h2><p>Reusable hero product preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/hero-secondary-action" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'herosecondaryaction herosecondaryaction actions reusable hero secondary action component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>HeroSecondaryAction</h2><p>Reusable hero secondary action component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/hero-trust-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'herotrusttext herotrusttext content reusable hero trust text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>HeroTrustText</h2><p>Reusable hero trust text component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/hex-color-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'hexcolorinput hexcolorinput forms reusable hex color input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>HexColorInput</h2><p>Reusable hex color input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/hidden-field" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'hiddenfield hiddenfield forms reusable hidden field component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>HiddenField</h2><p>Reusable hidden field component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/highlight-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'highlighttext highlighttext content reusable highlight text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>HighlightText</h2><p>Reusable highlight text component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/holiday-calendar" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'holidaycalendar holidaycalendar content reusable holiday calendar component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>HolidayCalendar</h2><p>Reusable holiday calendar component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/hostname-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'hostnameinput hostnameinput forms reusable hostname input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>HostnameInput</h2><p>Reusable hostname input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/hour-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'hourpicker hourpicker forms reusable hour picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>HourPicker</h2><p>Reusable hour picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/hsl-color-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'hslcolorinput hslcolorinput forms reusable hsl color input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>HslColorInput</h2><p>Reusable hsl color input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/hstack" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'hstack hstack core reusable hstack component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>hstack</h2><p>Reusable hstack component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/html-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'htmleditor htmleditor forms reusable html editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>HtmlEditor</h2><p>Reusable html editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/human-approval-step" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'humanapprovalstep humanapprovalstep content reusable human approval step component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>HumanApprovalStep</h2><p>Reusable human approval step component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/icon" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'icon icon content reusable icon component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Icon</h2><p>Reusable icon component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/icon-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'iconbutton iconbutton actions reusable icon button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>IconButton</h2><p>Reusable icon button component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/icon-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'iconpicker iconpicker forms reusable icon picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>IconPicker</h2><p>Reusable icon picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/icon-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'iconselector iconselector forms reusable icon selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>IconSelector</h2><p>Reusable icon selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/identifier-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'identifierinput identifierinput forms reusable identifier input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>IdentifierInput</h2><p>Reusable identifier input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/illustration" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'illustration illustration content reusable illustration component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Illustration</h2><p>Reusable illustration component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/image-compression-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'imagecompressionpreview imagecompressionpreview content reusable image compression preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ImageCompressionPreview</h2><p>Reusable image compression preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/image-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'imageeditor imageeditor forms reusable image editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ImageEditor</h2><p>Reusable image editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/image-preview-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'imagepreviewdialog imagepreviewdialog overlays reusable image preview dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ImagePreviewDialog</h2><p>Reusable image preview dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/image-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'imageselector imageselector forms reusable image selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ImageSelector</h2><p>Reusable image selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/image-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'imageupload imageupload content reusable image upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ImageUpload</h2><p>Reusable image upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/import-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'importprogress importprogress visualization reusable import progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ImportProgress</h2><p>Reusable import progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/incident-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'incidentalert incidentalert feedback reusable incident alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>IncidentAlert</h2><p>Reusable incident alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/incident-banner" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'incidentbanner incidentbanner feedback reusable incident banner component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>IncidentBanner</h2><p>Reusable incident banner component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/incident-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'incidentcard incidentcard content reusable incident card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>IncidentCard</h2><p>Reusable incident card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/incident-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'incidentlist incidentlist data reusable incident list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>IncidentList</h2><p>Reusable incident list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/incident-response-flow" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'incidentresponseflow incidentresponseflow visualization reusable incident response flow component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>IncidentResponseFlow</h2><p>Reusable incident response flow component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/incident-severity-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'incidentseveritybadge incidentseveritybadge feedback reusable incident severity badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>IncidentSeverityBadge</h2><p>Reusable incident severity badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/incident-timeline" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'incidenttimeline incidenttimeline visualization reusable incident timeline component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>IncidentTimeline</h2><p>Reusable incident timeline component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/industry-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'industrybadge industrybadge feedback reusable industry badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>IndustryBadge</h2><p>Reusable industry badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/industry-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'industryselector industryselector forms reusable industry selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>IndustrySelector</h2><p>Reusable industry selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/info-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'infocard infocard content reusable info card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>InfoCard</h2><p>Reusable info card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/inline" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'inline inline core reusable inline component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Inline</h2><p>Reusable inline component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/inline-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'inlinealert inlinealert feedback reusable inline alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>InlineAlert</h2><p>Reusable inline alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/inline-code" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'inlinecode inlinecode content reusable inline code component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>InlineCode</h2><p>Reusable inline code component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/input" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'input input core reusable input component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>input</h2><p>Reusable input component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/input-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'inputgroup inputgroup forms reusable input group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>InputGroup</h2><p>Reusable input group component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/inset-panel" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'insetpanel insetpanel layout reusable inset panel component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>InsetPanel</h2><p>Reusable inset panel component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/integer-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'integerinput integerinput forms reusable integer input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>IntegerInput</h2><p>Reusable integer input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/integration-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'integrationcard integrationcard content reusable integration card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>IntegrationCard</h2><p>Reusable integration card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/invoice-line-item" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'invoicelineitem invoicelineitem content reusable invoice line item component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>InvoiceLineItem</h2><p>Reusable invoice line item component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/invoice-summary" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'invoicesummary invoicesummary content reusable invoice summary component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>InvoiceSummary</h2><p>Reusable invoice summary component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/ip-address-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'ipaddressinput ipaddressinput forms reusable ip address input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>IpAddressInput</h2><p>Reusable ip address input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/job-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'jobcard jobcard content reusable job card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>JobCard</h2><p>Reusable job card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/job-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'jobprogress jobprogress visualization reusable job progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>JobProgress</h2><p>Reusable job progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/job-title-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'jobtitleinput jobtitleinput forms reusable job title input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>JobTitleInput</h2><p>Reusable job title input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/json-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'jsoninput jsoninput forms reusable json input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>JsonInput</h2><p>Reusable json input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/json-viewer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'jsonviewer jsonviewer content reusable json viewer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>JsonViewer</h2><p>Reusable json viewer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/key-value-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'keyvaluetable keyvaluetable data reusable key value table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>KeyValueTable</h2><p>Reusable key value table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/kyc-document-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'kycdocumentupload kycdocumentupload content reusable kyc document upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>KycDocumentUpload</h2><p>Reusable kyc document upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/language-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'languageselector languageselector forms reusable language selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LanguageSelector</h2><p>Reusable language selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/language-switcher" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'languageswitcher languageswitcher content reusable language switcher component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>LanguageSwitcher</h2><p>Reusable language switcher component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/last-name-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'lastnameinput lastnameinput forms reusable last name input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LastNameInput</h2><p>Reusable last name input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/latency-metric" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'latencymetric latencymetric visualization reusable latency metric component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>LatencyMetric</h2><p>Reusable latency metric component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/latitude-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'latitudeinput latitudeinput forms reusable latitude input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LatitudeInput</h2><p>Reusable latitude input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/leadership-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'leadershipgrid leadershipgrid data reusable leadership grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>LeadershipGrid</h2><p>Reusable leadership grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/lead-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'leadtext leadtext content reusable lead text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>LeadText</h2><p>Reusable lead text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/legal-acceptance-notice" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'legalacceptancenotice legalacceptancenotice feedback reusable legal acceptance notice component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>LegalAcceptanceNotice</h2><p>Reusable legal acceptance notice component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/legal-bullet-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'legalbulletlist legalbulletlist data reusable legal bullet list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>LegalBulletList</h2><p>Reusable legal bullet list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/legal-contact-block" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'legalcontactblock legalcontactblock content reusable legal contact block component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>LegalContactBlock</h2><p>Reusable legal contact block component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/legal-definition-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'legaldefinitionlist legaldefinitionlist data reusable legal definition list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>LegalDefinitionList</h2><p>Reusable legal definition list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/legal-document-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'legaldocumentheader legaldocumentheader layout reusable legal document header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>LegalDocumentHeader</h2><p>Reusable legal document header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/legal-document-layout" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'legaldocumentlayout legaldocumentlayout layout reusable legal document layout component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>LegalDocumentLayout</h2><p>Reusable legal document layout component.</p><div class="component-card-meta"><span>4 props</span><span>2 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/legal-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'legalhero legalhero layout reusable legal hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>LegalHero</h2><p>Reusable legal hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/legal-language-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'legallanguageselector legallanguageselector forms reusable legal language selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LegalLanguageSelector</h2><p>Reusable legal language selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/legal-notice" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'legalnotice legalnotice feedback reusable legal notice component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>LegalNotice</h2><p>Reusable legal notice component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/legal-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'legalpageshell legalpageshell layout reusable legal page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>LegalPageShell</h2><p>Reusable legal page shell component.</p><div class="component-card-meta"><span>1 props</span><span>2 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/legal-print-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'legalprintbutton legalprintbutton actions reusable legal print button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>LegalPrintButton</h2><p>Reusable legal print button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/legal-region-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'legalregionselector legalregionselector forms reusable legal region selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LegalRegionSelector</h2><p>Reusable legal region selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/legal-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'legalsection legalsection layout reusable legal section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>LegalSection</h2><p>Reusable legal section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/legal-summary" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'legalsummary legalsummary content reusable legal summary component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>LegalSummary</h2><p>Reusable legal summary component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/legal-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'legaltable legaltable data reusable legal table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>LegalTable</h2><p>Reusable legal table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/legal-table-of-contents" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'legaltableofcontents legaltableofcontents core reusable legal table of contents component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>LegalTableOfContents</h2><p>Reusable legal table of contents component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/legal-version-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'legalversionbadge legalversionbadge feedback reusable legal version badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>LegalVersionBadge</h2><p>Reusable legal version badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/letter-spacing-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'letterspacingpicker letterspacingpicker forms reusable letter spacing picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LetterSpacingPicker</h2><p>Reusable letter spacing picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/license-key-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'licensekeyinput licensekeyinput forms reusable license key input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LicenseKeyInput</h2><p>Reusable license key input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/lightbox" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'lightbox lightbox overlays reusable lightbox component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Lightbox</h2><p>Reusable lightbox component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/line-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'linechart linechart visualization reusable line chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>LineChart</h2><p>Reusable line chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/line-height-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'lineheightpicker lineheightpicker forms reusable line height picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LineHeightPicker</h2><p>Reusable line height picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/link" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'link link core reusable link component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Link</h2><p>Reusable link component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/link-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'linkbutton linkbutton actions reusable link button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>LinkButton</h2><p>Reusable link button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'list list data reusable list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>List</h2><p>Reusable list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/loading-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'loadingbutton loadingbutton actions reusable loading button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>LoadingButton</h2><p>Reusable loading button component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/locale-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'localeselector localeselector forms reusable locale selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LocaleSelector</h2><p>Reusable locale selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/localized-route-link" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'localizedroutelink localizedroutelink actions reusable localized route link component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>LocalizedRouteLink</h2><p>Reusable localized route link component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/location-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'locationpicker locationpicker forms reusable location picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LocationPicker</h2><p>Reusable location picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/logo" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'logo logo content reusable logo component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Logo</h2><p>Reusable logo component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/logo-cloud" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'logocloud logocloud core reusable logo cloud component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>LogoCloud</h2><p>Reusable logo cloud component.</p><div class="component-card-meta"><span>11 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/logo-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'logoupload logoupload content reusable logo upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>LogoUpload</h2><p>Reusable logo upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/logout-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'logoutdialog logoutdialog overlays reusable logout dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>LogoutDialog</h2><p>Reusable logout dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/log-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'logtable logtable data reusable log table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>LogTable</h2><p>Reusable log table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/longitude-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'longitudeinput longitudeinput forms reusable longitude input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>LongitudeInput</h2><p>Reusable longitude input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/maintenance-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'maintenancealert maintenancealert feedback reusable maintenance alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>MaintenanceAlert</h2><p>Reusable maintenance alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/maintenance-banner" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'maintenancebanner maintenancebanner feedback reusable maintenance banner component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>MaintenanceBanner</h2><p>Reusable maintenance banner component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/maintenance-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'maintenancecard maintenancecard content reusable maintenance card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MaintenanceCard</h2><p>Reusable maintenance card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/maintenance-page" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'maintenancepage maintenancepage content reusable maintenance page component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MaintenancePage</h2><p>Reusable maintenance page component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/maintenance-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'maintenancestate maintenancestate feedback reusable maintenance state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>MaintenanceState</h2><p>Reusable maintenance state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/maintenance-window-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'maintenancewindowpicker maintenancewindowpicker forms reusable maintenance window picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MaintenanceWindowPicker</h2><p>Reusable maintenance window picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/map-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'mappicker mappicker forms reusable map picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MapPicker</h2><p>Reusable map picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/markdown-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'markdowneditor markdowneditor forms reusable markdown editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MarkdownEditor</h2><p>Reusable markdown editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/marketing-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'marketingpageshell marketingpageshell layout reusable marketing page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>MarketingPageShell</h2><p>Reusable marketing page shell component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/marketing-section-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'marketingsectionheader marketingsectionheader layout reusable marketing section header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>MarketingSectionHeader</h2><p>Reusable marketing section header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/masked-secret-field" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'maskedsecretfield maskedsecretfield forms reusable masked secret field component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MaskedSecretField</h2><p>Reusable masked secret field component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/mega-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'megamenu megamenu overlays reusable mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>MegaMenu</h2><p>Reusable mega menu component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/member-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'memberlist memberlist data reusable member list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>MemberList</h2><p>Reusable member list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/mention-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'mentioninput mentioninput forms reusable mention input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MentionInput</h2><p>Reusable mention input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/message-character-counter" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'messagecharactercounter messagecharactercounter feedback reusable message character counter component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>MessageCharacterCounter</h2><p>Reusable message character counter component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/message-composer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'messagecomposer messagecomposer content reusable message composer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MessageComposer</h2><p>Reusable message composer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/message-composer-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'messagecomposerpreview messagecomposerpreview content reusable message composer preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MessageComposerPreview</h2><p>Reusable message composer preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/message-limit-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'messagelimitinput messagelimitinput forms reusable message limit input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MessageLimitInput</h2><p>Reusable message limit input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/message-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'messagepreview messagepreview content reusable message preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MessagePreview</h2><p>Reusable message preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/message-volume-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'messagevolumeslider messagevolumeslider content reusable message volume slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MessageVolumeSlider</h2><p>Reusable message volume slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/metric" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'metric metric visualization reusable metric component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>Metric</h2><p>Reusable metric component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/metric-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'metriccard metriccard content reusable metric card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MetricCard</h2><p>Reusable metric card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/metric-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'metricgrid metricgrid data reusable metric grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>MetricGrid</h2><p>Reusable metric grid component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/metric-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'metrictext metrictext content reusable metric text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MetricText</h2><p>Reusable metric text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/minute-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'minutepicker minutepicker forms reusable minute picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MinutePicker</h2><p>Reusable minute picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/mission-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'missionsection missionsection layout reusable mission section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>MissionSection</h2><p>Reusable mission section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/mobile-device-frame" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'mobiledeviceframe mobiledeviceframe layout reusable mobile device frame component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>MobileDeviceFrame</h2><p>Reusable mobile device frame component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/mobile-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'mobileinput mobileinput forms reusable mobile input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MobileInput</h2><p>Reusable mobile input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/mobile-menu-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'mobilemenubutton mobilemenubutton actions reusable mobile menu button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>MobileMenuButton</h2><p>Reusable mobile menu button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/mobile-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'mobilenavigation mobilenavigation layout reusable mobile navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>MobileNavigation</h2><p>Reusable mobile navigation component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/mobile-table-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'mobiletablecard mobiletablecard content reusable mobile table card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MobileTableCard</h2><p>Reusable mobile table card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/modal" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'modal modal core reusable modal component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Modal</h2><p>Reusable modal component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/monthly-volume-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'monthlyvolumeselector monthlyvolumeselector forms reusable monthly volume selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MonthlyVolumeSelector</h2><p>Reusable monthly volume selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/month-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'monthpicker monthpicker forms reusable month picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MonthPicker</h2><p>Reusable month picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/month-year-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'monthyearpicker monthyearpicker forms reusable month year picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MonthYearPicker</h2><p>Reusable month year picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/multi-file-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'multifileupload multifileupload content reusable multi file upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MultiFileUpload</h2><p>Reusable multi file upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/multiple-email-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'multipleemailinput multipleemailinput forms reusable multiple email input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>MultipleEmailInput</h2><p>Reusable multiple email input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/multi-select" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'multiselect multiselect core reusable multi select component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>MultiSelect</h2><p>Reusable multi select component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/muted-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'mutedtext mutedtext content reusable muted text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>MutedText</h2><p>Reusable muted text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/name-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'nameinput nameinput forms reusable name input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>NameInput</h2><p>Reusable name input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/narrow-container" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'narrowcontainer narrowcontainer core reusable narrow container component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>NarrowContainer</h2><p>Reusable narrow container component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'navigation navigation layout reusable navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Navigation</h2><p>Reusable navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/navigation-item" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'navigationitem navigationitem content reusable navigation item component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>NavigationItem</h2><p>Reusable navigation item component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/navigation-mega-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'navigationmegamenu navigationmegamenu overlays reusable navigation mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>NavigationMegaMenu</h2><p>Reusable navigation mega menu component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/new-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'newbadge newbadge feedback reusable new badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>NewBadge</h2><p>Reusable new badge component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/new-password-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'newpasswordinput newpasswordinput forms reusable new password input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>NewPasswordInput</h2><p>Reusable new password input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/newsletter-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'newslettercta newslettercta actions reusable newsletter c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>NewsletterCTA</h2><p>Reusable newsletter c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/newsletter-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'newsletterform newsletterform content reusable newsletter form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>NewsletterForm</h2><p>Reusable newsletter form component.</p><div class="component-card-meta"><span>19 props</span><span>0 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/no-results-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'noresultsstate noresultsstate feedback reusable no results state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>NoResultsState</h2><p>Reusable no results state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/not-found-page" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'notfoundpage notfoundpage content reusable not found page component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>NotFoundPage</h2><p>Reusable not found page component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/not-found-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'notfoundstate notfoundstate feedback reusable not found state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>NotFoundState</h2><p>Reusable not found state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/notification-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'notificationcard notificationcard content reusable notification card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>NotificationCard</h2><p>Reusable notification card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/notification-dot" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'notificationdot notificationdot core reusable notification dot component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>NotificationDot</h2><p>Reusable notification dot component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/notification-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'notificationlist notificationlist data reusable notification list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>NotificationList</h2><p>Reusable notification list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/number-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'numberinput numberinput forms reusable number input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>NumberInput</h2><p>Reusable number input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/office-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'officecard officecard content reusable office card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>OfficeCard</h2><p>Reusable office card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/offline-page" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'offlinepage offlinepage content reusable offline page component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>OfflinePage</h2><p>Reusable offline page component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/offline-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'offlinestate offlinestate feedback reusable offline state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>OfflineState</h2><p>Reusable offline state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/onboarding-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'onboardingprogress onboardingprogress visualization reusable onboarding progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>OnboardingProgress</h2><p>Reusable onboarding progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/one-time-secret-display" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'onetimesecretdisplay onetimesecretdisplay content reusable one time secret display component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>OneTimeSecretDisplay</h2><p>Reusable one time secret display component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/online-indicator" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'onlineindicator onlineindicator feedback reusable online indicator component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>OnlineIndicator</h2><p>Reusable online indicator component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/opacity-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'opacityslider opacityslider content reusable opacity slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>OpacitySlider</h2><p>Reusable opacity slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/open-apicta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'openapicta openapicta actions reusable open a p i c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>OpenAPICTA</h2><p>Reusable open a p i c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/optional-indicator" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'optionalindicator optionalindicator feedback reusable optional indicator component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>OptionalIndicator</h2><p>Reusable optional indicator component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/organization-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'organizationselector organizationselector forms reusable organization selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>OrganizationSelector</h2><p>Reusable organization selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/otp-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'otpinput otpinput forms reusable otp input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>OtpInput</h2><p>Reusable otp input component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/otp-verification-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'otpverificationform otpverificationform content reusable otp verification form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>OtpVerificationForm</h2><p>Reusable otp verification form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/outlined-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'outlinedcard outlinedcard content reusable outlined card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>OutlinedCard</h2><p>Reusable outlined card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/page-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'pagealert pagealert feedback reusable page alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>PageAlert</h2><p>Reusable page alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/page-header" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'pageheader pageheader core reusable page header component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>PageHeader</h2><p>Reusable page header component.</p><div class="component-card-meta"><span>16 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/page-heading" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'pageheading pageheading core reusable page heading component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>PageHeading</h2><p>Reusable page heading component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/page-shell" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'pageshell pageshell core reusable page shell component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>PageShell</h2><p>Reusable page shell component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/page-skeleton" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'pageskeleton pageskeleton feedback reusable page skeleton component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>PageSkeleton</h2><p>Reusable page skeleton component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/pagination" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'pagination pagination core reusable pagination component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Pagination</h2><p>Reusable pagination component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/panel" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'panel panel layout reusable panel component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Panel</h2><p>Reusable panel component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/partner-application-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'partnerapplicationform partnerapplicationform content reusable partner application form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PartnerApplicationForm</h2><p>Reusable partner application form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/partner-logo-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'partnerlogogrid partnerlogogrid data reusable partner logo grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PartnerLogoGrid</h2><p>Reusable partner logo grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/partner-program-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'partnerprogramcard partnerprogramcard content reusable partner program card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PartnerProgramCard</h2><p>Reusable partner program card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/passkey-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'passkeybutton passkeybutton actions reusable passkey button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>PasskeyButton</h2><p>Reusable passkey button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/password-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'passwordinput passwordinput forms reusable password input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PasswordInput</h2><p>Reusable password input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/password-requirement-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'passwordrequirementlist passwordrequirementlist data reusable password requirement list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PasswordRequirementList</h2><p>Reusable password requirement list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/password-strength-meter" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'passwordstrengthmeter passwordstrengthmeter visualization reusable password strength meter component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>PasswordStrengthMeter</h2><p>Reusable password strength meter component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/password-visibility-toggle" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'passwordvisibilitytoggle passwordvisibilitytoggle forms reusable password visibility toggle component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PasswordVisibilityToggle</h2><p>Reusable password visibility toggle component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/path-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'pathinput pathinput forms reusable path input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PathInput</h2><p>Reusable path input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/payment-method-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'paymentmethodcard paymentmethodcard content reusable payment method card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PaymentMethodCard</h2><p>Reusable payment method card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/pdf-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pdfpreview pdfpreview content reusable pdf preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PdfPreview</h2><p>Reusable pdf preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/percentage-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'percentageinput percentageinput forms reusable percentage input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PercentageInput</h2><p>Reusable percentage input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/permission-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'permissionselector permissionselector forms reusable permission selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PermissionSelector</h2><p>Reusable permission selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/phone-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'phoneinput phoneinput forms reusable phone input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PhoneInput</h2><p>Reusable phone input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/pie-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'piechart piechart visualization reusable pie chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>PieChart</h2><p>Reusable pie chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/pill" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'pill pill core reusable pill component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Pill</h2><p>Reusable pill component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/pin-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'pininput pininput forms reusable pin input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PinInput</h2><p>Reusable pin input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/plain-text-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'plaintexteditor plaintexteditor forms reusable plain text editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PlainTextEditor</h2><p>Reusable plain text editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/plan-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'plancta plancta actions reusable plan c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>PlanCTA</h2><p>Reusable plan c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/plan-feature-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'planfeaturelist planfeaturelist data reusable plan feature list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PlanFeatureList</h2><p>Reusable plan feature list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/plan-limit-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'planlimitlist planlimitlist data reusable plan limit list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PlanLimitList</h2><p>Reusable plan limit list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/plan-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'planselector planselector forms reusable plan selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PlanSelector</h2><p>Reusable plan selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/platform-pillar-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'platformpillarcard platformpillarcard content reusable platform pillar card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PlatformPillarCard</h2><p>Reusable platform pillar card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/policy-version-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'policyversiontable policyversiontable data reusable policy version table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PolicyVersionTable</h2><p>Reusable policy version table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/popover" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'popover popover overlays reusable popover component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Popover</h2><p>Reusable popover component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/port-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'portinput portinput forms reusable port input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PortInput</h2><p>Reusable port input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/port-number-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'portnumberinput portnumberinput forms reusable port number input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PortNumberInput</h2><p>Reusable port number input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/positive-number-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'positivenumberinput positivenumberinput forms reusable positive number input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PositiveNumberInput</h2><p>Reusable positive number input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/postal-code-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'postalcodeinput postalcodeinput forms reusable postal code input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PostalCodeInput</h2><p>Reusable postal code input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/postman-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'postmancta postmancta actions reusable postman c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>PostmanCTA</h2><p>Reusable postman c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/preset-date-range-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'presetdaterangepicker presetdaterangepicker forms reusable preset date range picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PresetDateRangePicker</h2><p>Reusable preset date range picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/press-release-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pressreleasecard pressreleasecard content reusable press release card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PressReleaseCard</h2><p>Reusable press release card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/preview-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'previewbadge previewbadge feedback reusable preview badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>PreviewBadge</h2><p>Reusable preview badge component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/previous-next-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'previousnextnavigation previousnextnavigation layout reusable previous next navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>PreviousNextNavigation</h2><p>Reusable previous next navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/price-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'priceinput priceinput forms reusable price input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PriceInput</h2><p>Reusable price input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/price-range-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pricerangeslider pricerangeslider content reusable price range slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PriceRangeSlider</h2><p>Reusable price range slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/price-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pricetext pricetext content reusable price text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PriceText</h2><p>Reusable price text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/pricing-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pricingcard pricingcard content reusable pricing card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PricingCard</h2><p>Reusable pricing card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/pricing-comparison-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'pricingcomparisontable pricingcomparisontable data reusable pricing comparison table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PricingComparisonTable</h2><p>Reusable pricing comparison table component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/pricing-contact-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pricingcontactform pricingcontactform content reusable pricing contact form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PricingContactForm</h2><p>Reusable pricing contact form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/pricing-feature-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'pricingfeaturegroup pricingfeaturegroup forms reusable pricing feature group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PricingFeatureGroup</h2><p>Reusable pricing feature group component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/pricing-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'pricinggrid pricinggrid data reusable pricing grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PricingGrid</h2><p>Reusable pricing grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/pricing-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'pricinghero pricinghero layout reusable pricing hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>PricingHero</h2><p>Reusable pricing hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/pricing-plan-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pricingplancard pricingplancard content reusable pricing plan card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PricingPlanCard</h2><p>Reusable pricing plan card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/pricing-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'pricingtable pricingtable data reusable pricing table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>PricingTable</h2><p>Reusable pricing table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/pricing-toggle" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'pricingtoggle pricingtoggle forms reusable pricing toggle component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PricingToggle</h2><p>Reusable pricing toggle component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/primary-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'primarybutton primarybutton actions reusable primary button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>PrimaryButton</h2><p>Reusable primary button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/print-action" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'printaction printaction actions reusable print action component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>PrintAction</h2><p>Reusable print action component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/print-policy-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'printpolicybutton printpolicybutton actions reusable print policy button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>PrintPolicyButton</h2><p>Reusable print policy button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/priority-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'priorityselector priorityselector forms reusable priority selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PrioritySelector</h2><p>Reusable priority selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/privacy-notice" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'privacynotice privacynotice feedback reusable privacy notice component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>PrivacyNotice</h2><p>Reusable privacy notice component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/product-architecture-diagram" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'productarchitecturediagram productarchitecturediagram visualization reusable product architecture diagram component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ProductArchitectureDiagram</h2><p>Reusable product architecture diagram component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/product-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'productcard productcard content reusable product card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProductCard</h2><p>Reusable product card component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/product-category-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'productcategorysection productcategorysection layout reusable product category section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ProductCategorySection</h2><p>Reusable product category section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/product-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'productcta productcta actions reusable product c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ProductCTA</h2><p>Reusable product c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/product-feature-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'productfeaturelist productfeaturelist data reusable product feature list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ProductFeatureList</h2><p>Reusable product feature list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/product-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'productgrid productgrid data reusable product grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ProductGrid</h2><p>Reusable product grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/product-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'producthero producthero layout reusable product hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ProductHero</h2><p>Reusable product hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/product-icon" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'producticon producticon content reusable product icon component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProductIcon</h2><p>Reusable product icon component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/product-integration-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'productintegrationlist productintegrationlist data reusable product integration list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ProductIntegrationList</h2><p>Reusable product integration list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/product-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'productlist productlist data reusable product list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ProductList</h2><p>Reusable product list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/product-logo" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'productlogo productlogo content reusable product logo component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProductLogo</h2><p>Reusable product logo component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/product-mega-menu" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'productmegamenu productmegamenu core reusable product mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>ProductMegaMenu</h2><p>Reusable product mega menu component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/product-mini-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'productminicard productminicard content reusable product mini card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProductMiniCard</h2><p>Reusable product mini card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/product-navigation-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'productnavigationcard productnavigationcard content reusable product navigation card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProductNavigationCard</h2><p>Reusable product navigation card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/product-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'productpageshell productpageshell layout reusable product page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ProductPageShell</h2><p>Reusable product page shell component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/product-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'productselector productselector forms reusable product selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ProductSelector</h2><p>Reusable product selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/products-mega-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'productsmegamenu productsmegamenu overlays reusable products mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ProductsMegaMenu</h2><p>Reusable products mega menu component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/product-status-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'productstatusbadge productstatusbadge feedback reusable product status badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ProductStatusBadge</h2><p>Reusable product status badge component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/product-use-case-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'productusecaselist productusecaselist data reusable product use case list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ProductUseCaseList</h2><p>Reusable product use case list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/progress" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'progress progress core reusable progress component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>progress</h2><p>Reusable progress component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/progress-bar" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'progressbar progressbar core reusable progress bar component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>ProgressBar</h2><p>Reusable progress bar component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/progress-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'progresschart progresschart visualization reusable progress chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ProgressChart</h2><p>Reusable progress chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/progress-ring" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'progressring progressring visualization reusable progress ring component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ProgressRing</h2><p>Reusable progress ring component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/progress-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'progressslider progressslider content reusable progress slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProgressSlider</h2><p>Reusable progress slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/project-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'projectcard projectcard content reusable project card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProjectCard</h2><p>Reusable project card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/project-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'projectselector projectselector forms reusable project selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ProjectSelector</h2><p>Reusable project selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/project-switcher" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'projectswitcher projectswitcher content reusable project switcher component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ProjectSwitcher</h2><p>Reusable project switcher component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/promo-code-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'promocodeinput promocodeinput forms reusable promo code input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PromoCodeInput</h2><p>Reusable promo code input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/prompt-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'promptdialog promptdialog overlays reusable prompt dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>PromptDialog</h2><p>Reusable prompt dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/provider-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'providerselector providerselector forms reusable provider selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ProviderSelector</h2><p>Reusable provider selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/public-footer" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'publicfooter publicfooter core reusable public footer component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>PublicFooter</h2><p>Reusable public footer component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/public-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'publicheader publicheader layout reusable public header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>PublicHeader</h2><p>Reusable public header component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/public-header-logo" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'publicheaderlogo publicheaderlogo content reusable public header logo component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PublicHeaderLogo</h2><p>Reusable public header logo component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/public-mobile-navigation" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'publicmobilenavigation publicmobilenavigation core reusable public mobile navigation component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>PublicMobileNavigation</h2><p>Reusable public mobile navigation component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/public-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'publicpageshell publicpageshell layout reusable public page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>PublicPageShell</h2><p>Reusable public page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/public-search" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'publicsearch publicsearch core reusable public search component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>PublicSearch</h2><p>Reusable public search component.</p><div class="component-card-meta"><span>15 props</span><span>0 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/publish-date-time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'publishdatetimepicker publishdatetimepicker forms reusable publish date time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PublishDateTimePicker</h2><p>Reusable publish date time picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/push-composer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'pushcomposer pushcomposer content reusable push composer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>PushComposer</h2><p>Reusable push composer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/push-notification-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'pushnotificationeditor pushnotificationeditor forms reusable push notification editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>PushNotificationEditor</h2><p>Reusable push notification editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/qr-code" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'qrcode qrcode content reusable qr code component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>QrCode</h2><p>Reusable qr code component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/quantity-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'quantityinput quantityinput forms reusable quantity input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>QuantityInput</h2><p>Reusable quantity input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/quantity-stepper" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'quantitystepper quantitystepper content reusable quantity stepper component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>QuantityStepper</h2><p>Reusable quantity stepper component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/quiet-hours-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'quiethourspicker quiethourspicker forms reusable quiet hours picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>QuietHoursPicker</h2><p>Reusable quiet hours picker component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/quote-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'quotetext quotetext content reusable quote text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>QuoteText</h2><p>Reusable quote text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/radio" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'radio radio core reusable radio component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Radio</h2><p>Reusable radio component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/radio-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'radiogroup radiogroup forms reusable radio group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RadioGroup</h2><p>Reusable radio group component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/range-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'rangeinput rangeinput forms reusable range input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RangeInput</h2><p>Reusable range input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/range-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'rangeslider rangeslider content reusable range slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>RangeSlider</h2><p>Reusable range slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/rate-limited-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'ratelimitedstate ratelimitedstate feedback reusable rate limited state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>RateLimitedState</h2><p>Reusable rate limited state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/rate-limit-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'ratelimitinput ratelimitinput forms reusable rate limit input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RateLimitInput</h2><p>Reusable rate limit input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/rate-limit-page" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'ratelimitpage ratelimitpage content reusable rate limit page component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>RateLimitPage</h2><p>Reusable rate limit page component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/rate-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'ratetable ratetable data reusable rate table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>RateTable</h2><p>Reusable rate table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/rating-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'ratingslider ratingslider content reusable rating slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>RatingSlider</h2><p>Reusable rating slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/recipient-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'recipientselector recipientselector forms reusable recipient selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RecipientSelector</h2><p>Reusable recipient selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/recovery-code-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'recoverycodeform recoverycodeform content reusable recovery code form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>RecoveryCodeForm</h2><p>Reusable recovery code form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/recovery-code-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'recoverycodeinput recoverycodeinput forms reusable recovery code input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RecoveryCodeInput</h2><p>Reusable recovery code input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/recurrence-rule-builder" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'recurrencerulebuilder recurrencerulebuilder content reusable recurrence rule builder component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>RecurrenceRuleBuilder</h2><p>Reusable recurrence rule builder component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/recurring-schedule-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'recurringschedulepicker recurringschedulepicker forms reusable recurring schedule picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RecurringSchedulePicker</h2><p>Reusable recurring schedule picker component.</p><div class="component-card-meta"><span>6 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/redirect-uri-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'redirecturiinput redirecturiinput forms reusable redirect uri input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RedirectUriInput</h2><p>Reusable redirect uri input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/reference-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'referenceinput referenceinput forms reusable reference input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ReferenceInput</h2><p>Reusable reference input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/regex-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'regexinput regexinput forms reusable regex input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RegexInput</h2><p>Reusable regex input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/regional-privacy-banner" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'regionalprivacybanner regionalprivacybanner feedback reusable regional privacy banner component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>RegionalPrivacyBanner</h2><p>Reusable regional privacy banner component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/region-availability-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'regionavailabilitytable regionavailabilitytable data reusable region availability table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>RegionAvailabilityTable</h2><p>Reusable region availability table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/region-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'regionselector regionselector forms reusable region selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RegionSelector</h2><p>Reusable region selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/region-unavailable-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'regionunavailablealert regionunavailablealert feedback reusable region unavailable alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>RegionUnavailableAlert</h2><p>Reusable region unavailable alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/region-unavailable-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'regionunavailablestate regionunavailablestate feedback reusable region unavailable state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>RegionUnavailableState</h2><p>Reusable region unavailable state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/reject-optional-cookies-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'rejectoptionalcookiesbutton rejectoptionalcookiesbutton actions reusable reject optional cookies button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>RejectOptionalCookiesButton</h2><p>Reusable reject optional cookies button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/reopen-cookie-settings-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'reopencookiesettingsbutton reopencookiesettingsbutton actions reusable reopen cookie settings button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ReopenCookieSettingsButton</h2><p>Reusable reopen cookie settings button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/report-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'reportcard reportcard content reusable report card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ReportCard</h2><p>Reusable report card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/request-response-viewer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'requestresponseviewer requestresponseviewer content reusable request response viewer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>RequestResponseViewer</h2><p>Reusable request response viewer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/request-viewer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'requestviewer requestviewer content reusable request viewer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>RequestViewer</h2><p>Reusable request viewer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/required-indicator" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'requiredindicator requiredindicator feedback reusable required indicator component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>RequiredIndicator</h2><p>Reusable required indicator component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/reset-password-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'resetpasswordform resetpasswordform content reusable reset password form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ResetPasswordForm</h2><p>Reusable reset password form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/resizable-panel" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'resizablepanel resizablepanel layout reusable resizable panel component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ResizablePanel</h2><p>Reusable resizable panel component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/resource-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'resourcecard resourcecard content reusable resource card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ResourceCard</h2><p>Reusable resource card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/resource-download-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'resourcedownloadcard resourcedownloadcard content reusable resource download card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ResourceDownloadCard</h2><p>Reusable resource download card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/resource-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'resourcepageshell resourcepageshell layout reusable resource page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ResourcePageShell</h2><p>Reusable resource page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/resource-search" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'resourcesearch resourcesearch content reusable resource search component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ResourceSearch</h2><p>Reusable resource search component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/resources-mega-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'resourcesmegamenu resourcesmegamenu overlays reusable resources mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ResourcesMegaMenu</h2><p>Reusable resources mega menu component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/resource-type-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'resourcetypebadge resourcetypebadge feedback reusable resource type badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ResourceTypeBadge</h2><p>Reusable resource type badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/response-viewer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'responseviewer responseviewer content reusable response viewer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ResponseViewer</h2><p>Reusable response viewer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/responsible-disclosure-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'responsibledisclosurecta responsibledisclosurecta actions reusable responsible disclosure c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ResponsibleDisclosureCTA</h2><p>Reusable responsible disclosure c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/responsive-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'responsivetable responsivetable data reusable responsive table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ResponsiveTable</h2><p>Reusable responsive table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/results-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'resultssection resultssection layout reusable results section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ResultsSection</h2><p>Reusable results section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/retention-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'retentiontable retentiontable data reusable retention table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>RetentionTable</h2><p>Reusable retention table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/retry-count-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'retrycountinput retrycountinput forms reusable retry count input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RetryCountInput</h2><p>Reusable retry count input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/revenue-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'revenuechart revenuechart visualization reusable revenue chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>RevenueChart</h2><p>Reusable revenue chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/rgb-color-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'rgbcolorinput rgbcolorinput forms reusable rgb color input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RgbColorInput</h2><p>Reusable rgb color input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/rich-text-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'richtexteditor richtexteditor forms reusable rich text editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RichTextEditor</h2><p>Reusable rich text editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/rich-text-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'richtextinput richtextinput forms reusable rich text input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RichTextInput</h2><p>Reusable rich text input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/role-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'roleselector roleselector forms reusable role selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RoleSelector</h2><p>Reusable role selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/rolling-date-range-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'rollingdaterangepicker rollingdaterangepicker forms reusable rolling date range picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RollingDateRangePicker</h2><p>Reusable rolling date range picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/save-cookie-preferences-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'savecookiepreferencesbutton savecookiepreferencesbutton actions reusable save cookie preferences button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SaveCookiePreferencesButton</h2><p>Reusable save cookie preferences button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/saved-filter-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'savedfilterselector savedfilterselector forms reusable saved filter selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SavedFilterSelector</h2><p>Reusable saved filter selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/scheduled-date-time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'scheduleddatetimepicker scheduleddatetimepicker forms reusable scheduled date time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ScheduledDateTimePicker</h2><p>Reusable scheduled date time picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/schedule-message-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'schedulemessagepicker schedulemessagepicker forms reusable schedule message picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ScheduleMessagePicker</h2><p>Reusable schedule message picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/schedule-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'schedulepicker schedulepicker forms reusable schedule picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SchedulePicker</h2><p>Reusable schedule picker component.</p><div class="component-card-meta"><span>2 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/screenshot-frame" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'screenshotframe screenshotframe layout reusable screenshot frame component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>ScreenshotFrame</h2><p>Reusable screenshot frame component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/scroll-area" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'scrollarea scrollarea core reusable scroll area component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>ScrollArea</h2><p>Reusable scroll area component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/sdkcard" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'sdkcard sdkcard content reusable s d k card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SDKCard</h2><p>Reusable s d k card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/sdk-language-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'sdklanguageselector sdklanguageselector forms reusable sdk language selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SdkLanguageSelector</h2><p>Reusable sdk language selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/sdklanguage-tabs" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'sdklanguagetabs sdklanguagetabs content reusable s d k language tabs component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SDKLanguageTabs</h2><p>Reusable s d k language tabs component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/sdktabs" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'sdktabs sdktabs core reusable sdktabs component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>SDKTabs</h2><p>Reusable sdktabs component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/search-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'searchbutton searchbutton actions reusable search button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SearchButton</h2><p>Reusable search button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/search-category-tabs" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'searchcategorytabs searchcategorytabs content reusable search category tabs component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SearchCategoryTabs</h2><p>Reusable search category tabs component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/search-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'searchdialog searchdialog overlays reusable search dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>SearchDialog</h2><p>Reusable search dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/search-empty-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'searchemptystate searchemptystate feedback reusable search empty state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>SearchEmptyState</h2><p>Reusable search empty state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/search-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'searchinput searchinput forms reusable search input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SearchInput</h2><p>Reusable search input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/search-loading-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'searchloadingstate searchloadingstate feedback reusable search loading state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>SearchLoadingState</h2><p>Reusable search loading state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/search-result-item" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'searchresultitem searchresultitem content reusable search result item component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SearchResultItem</h2><p>Reusable search result item component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/secondary-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'secondarybutton secondarybutton actions reusable secondary button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SecondaryButton</h2><p>Reusable secondary button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/second-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'secondpicker secondpicker forms reusable second picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SecondPicker</h2><p>Reusable second picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/secret-display" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'secretdisplay secretdisplay content reusable secret display component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SecretDisplay</h2><p>Reusable secret display component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/secret-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'secretinput secretinput forms reusable secret input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SecretInput</h2><p>Reusable secret input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/secret-reveal-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'secretrevealdialog secretrevealdialog overlays reusable secret reveal dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>SecretRevealDialog</h2><p>Reusable secret reveal dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'section section layout reusable section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Section</h2><p>Reusable section component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/section-actions" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'sectionactions sectionactions actions reusable section actions component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SectionActions</h2><p>Reusable section actions component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/section-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'sectionheader sectionheader layout reusable section header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SectionHeader</h2><p>Reusable section header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/section-heading" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'sectionheading sectionheading core reusable section heading component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>SectionHeading</h2><p>Reusable section heading component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/security-alert" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'securityalert securityalert feedback reusable security alert component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>SecurityAlert</h2><p>Reusable security alert component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/security-contact-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'securitycontactcard securitycontactcard content reusable security contact card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SecurityContactCard</h2><p>Reusable security contact card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/security-feature-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'securityfeaturecard securityfeaturecard content reusable security feature card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SecurityFeatureCard</h2><p>Reusable security feature card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/security-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'securityhero securityhero layout reusable security hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SecurityHero</h2><p>Reusable security hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/security-pillar-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'securitypillargrid securitypillargrid data reusable security pillar grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>SecurityPillarGrid</h2><p>Reusable security pillar grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/security-practice-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'securitypracticelist securitypracticelist data reusable security practice list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>SecurityPracticeList</h2><p>Reusable security practice list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/security-report-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'securityreportform securityreportform content reusable security report form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SecurityReportForm</h2><p>Reusable security report form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/select" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'select select core reusable select component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Select</h2><p>Reusable select component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/sender-id-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'senderidinput senderidinput forms reusable sender id input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SenderIdInput</h2><p>Reusable sender id input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/server-error-page" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'servererrorpage servererrorpage content reusable server error page component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ServerErrorPage</h2><p>Reusable server error page component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/service-level-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'serviceleveltable serviceleveltable data reusable service level table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ServiceLevelTable</h2><p>Reusable service level table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/service-status-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'servicestatusbadge servicestatusbadge feedback reusable service status badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>ServiceStatusBadge</h2><p>Reusable service status badge component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/service-status-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'servicestatuslist servicestatuslist data reusable service status list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ServiceStatusList</h2><p>Reusable service status list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/service-status-row" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'servicestatusrow servicestatusrow data reusable service status row component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ServiceStatusRow</h2><p>Reusable service status row component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/session-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'sessioncard sessioncard content reusable session card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SessionCard</h2><p>Reusable session card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/session-expired-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'sessionexpireddialog sessionexpireddialog overlays reusable session expired dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>SessionExpiredDialog</h2><p>Reusable session expired dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/setup-checklist" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'setupchecklist setupchecklist content reusable setup checklist component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SetupChecklist</h2><p>Reusable setup checklist component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/severity-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'severityselector severityselector forms reusable severity selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SeveritySelector</h2><p>Reusable severity selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/shadow-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'shadowpicker shadowpicker forms reusable shadow picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ShadowPicker</h2><p>Reusable shadow picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/share-action" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'shareaction shareaction actions reusable share action component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ShareAction</h2><p>Reusable share action component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/share-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'sharebutton sharebutton actions reusable share button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ShareButton</h2><p>Reusable share button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/sidebar-layout" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'sidebarlayout sidebarlayout layout reusable sidebar layout component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SidebarLayout</h2><p>Reusable sidebar layout component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/side-panel" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'sidepanel sidepanel layout reusable side panel component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SidePanel</h2><p>Reusable side panel component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/sign-in-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'signinform signinform content reusable sign in form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SignInForm</h2><p>Reusable sign in form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/sign-in-link" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'signinlink signinlink actions reusable sign in link component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SignInLink</h2><p>Reusable sign in link component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/sign-up-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'signupform signupform content reusable sign up form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SignUpForm</h2><p>Reusable sign up form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/site-search" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'sitesearch sitesearch content reusable site search component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SiteSearch</h2><p>Reusable site search component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/skeleton" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'skeleton skeleton feedback reusable skeleton component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>Skeleton</h2><p>Reusable skeleton component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/skip-link" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'skiplink skiplink actions reusable skip link component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SkipLink</h2><p>Reusable skip link component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/sla-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'slatable slatable data reusable sla table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>SlaTable</h2><p>Reusable sla table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'slider slider content reusable slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Slider</h2><p>Reusable slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/slug-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'sluginput sluginput forms reusable slug input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SlugInput</h2><p>Reusable slug input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/small-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'smalltext smalltext content reusable small text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SmallText</h2><p>Reusable small text component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/smart-route-diagram" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'smartroutediagram smartroutediagram visualization reusable smart route diagram component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>SmartRouteDiagram</h2><p>Reusable smart route diagram component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/sms-composer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'smscomposer smscomposer content reusable sms composer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SmsComposer</h2><p>Reusable sms composer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/sms-message-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'smsmessageeditor smsmessageeditor forms reusable sms message editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SmsMessageEditor</h2><p>Reusable sms message editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/sms-segment-counter" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'smssegmentcounter smssegmentcounter feedback reusable sms segment counter component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>SmsSegmentCounter</h2><p>Reusable sms segment counter component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/social-share" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'socialshare socialshare core reusable social share component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>SocialShare</h2><p>Reusable social share component.</p><div class="component-card-meta"><span>10 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/solution-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'solutionhero solutionhero layout reusable solution hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SolutionHero</h2><p>Reusable solution hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/solution-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'solutionpageshell solutionpageshell layout reusable solution page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SolutionPageShell</h2><p>Reusable solution page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/solution-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'solutionsection solutionsection layout reusable solution section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SolutionSection</h2><p>Reusable solution section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/solutions-mega-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'solutionsmegamenu solutionsmegamenu overlays reusable solutions mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>SolutionsMegaMenu</h2><p>Reusable solutions mega menu component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/sortable-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'sortabletable sortabletable data reusable sortable table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>SortableTable</h2><p>Reusable sortable table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/spacer" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'spacer spacer core reusable spacer component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>spacer</h2><p>Reusable spacer component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/spinner" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'spinner spinner core reusable spinner component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Spinner</h2><p>Reusable spinner component.</p><div class="component-card-meta"><span>3 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/split-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'splitbutton splitbutton actions reusable split button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SplitButton</h2><p>Reusable split button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/split-cta" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'splitcta splitcta actions reusable split c t a component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>SplitCTA</h2><p>Reusable split c t a component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/split-hero" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'splithero splithero layout reusable split hero component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SplitHero</h2><p>Reusable split hero component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/split-layout" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'splitlayout splitlayout layout reusable split layout component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SplitLayout</h2><p>Reusable split layout component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/split-section-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'splitsectionheader splitsectionheader layout reusable split section header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>SplitSectionHeader</h2><p>Reusable split section header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/stack" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'stack stack core reusable stack component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Stack</h2><p>Reusable stack component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/start-free-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'startfreebutton startfreebutton actions reusable start free button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>StartFreeButton</h2><p>Reusable start free button component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/stat-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'statcard statcard content reusable stat card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>StatCard</h2><p>Reusable stat card component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/state-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'stateselector stateselector forms reusable state selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>StateSelector</h2><p>Reusable state selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/status-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'statusbadge statusbadge feedback reusable status badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>StatusBadge</h2><p>Reusable status badge component.</p><div class="component-card-meta"><span>2 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/status-banner" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'statusbanner statusbanner core reusable status banner component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>StatusBanner</h2><p>Reusable status banner component.</p><div class="component-card-meta"><span>9 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/status-page-shell" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'statuspageshell statuspageshell layout reusable status page shell component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>StatusPageShell</h2><p>Reusable status page shell component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/status-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'statusselector statusselector forms reusable status selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>StatusSelector</h2><p>Reusable status selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/status-subscribe-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'statussubscribeform statussubscribeform content reusable status subscribe form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>StatusSubscribeForm</h2><p>Reusable status subscribe form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/status-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'statustable statustable data reusable status table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>StatusTable</h2><p>Reusable status table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/step-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'stepnavigation stepnavigation layout reusable step navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>StepNavigation</h2><p>Reusable step navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/stepper" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'stepper stepper content reusable stepper component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Stepper</h2><p>Reusable stepper component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/stepper-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'stepperinput stepperinput forms reusable stepper input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>StepperInput</h2><p>Reusable stepper input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/step-up-authentication-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'stepupauthenticationdialog stepupauthenticationdialog overlays reusable step up authentication dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>StepUpAuthenticationDialog</h2><p>Reusable step up authentication dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/sticker-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'stickerpicker stickerpicker forms reusable sticker picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>StickerPicker</h2><p>Reusable sticker picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/sticky" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'sticky sticky core reusable sticky component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Sticky</h2><p>Reusable sticky component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/sticky-layout" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'stickylayout stickylayout layout reusable sticky layout component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>StickyLayout</h2><p>Reusable sticky layout component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/street-address-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'streetaddressinput streetaddressinput forms reusable street address input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>StreetAddressInput</h2><p>Reusable street address input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/subdomain-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'subdomaininput subdomaininput forms reusable subdomain input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SubdomainInput</h2><p>Reusable subdomain input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/subject-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'subjectinput subjectinput forms reusable subject input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>SubjectInput</h2><p>Reusable subject input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/subprocessor-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'subprocessortable subprocessortable data reusable subprocessor table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>SubprocessorTable</h2><p>Reusable subprocessor table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/subsection-heading" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'subsectionheading subsectionheading core reusable subsection heading component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>SubsectionHeading</h2><p>Reusable subsection heading component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/success-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'successcard successcard content reusable success card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SuccessCard</h2><p>Reusable success card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/success-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'successstate successstate feedback reusable success state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>SuccessState</h2><p>Reusable success state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/support-request-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'supportrequestform supportrequestform content reusable support request form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>SupportRequestForm</h2><p>Reusable support request form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/surface" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'surface surface core reusable surface component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Surface</h2><p>Reusable surface component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/switch" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'switch switch core reusable switch component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Switch</h2><p>Reusable switch component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'table table data reusable table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>Table</h2><p>Reusable table component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/table-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'tableheader tableheader layout reusable table header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>TableHeader</h2><p>Reusable table header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/table-row" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'tablerow tablerow data reusable table row component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>TableRow</h2><p>Reusable table row component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/table-skeleton" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'tableskeleton tableskeleton feedback reusable table skeleton component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>TableSkeleton</h2><p>Reusable table skeleton component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/tabs" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'tabs tabs content reusable tabs component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Tabs</h2><p>Reusable tabs component.</p><div class="component-card-meta"><span>2 props</span><span>2 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/tag" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'tag tag core reusable tag component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>tag</h2><p>Reusable tag component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/tag-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'taginput taginput forms reusable tag input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TagInput</h2><p>Reusable tag input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/tax-notice" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'taxnotice taxnotice feedback reusable tax notice component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>TaxNotice</h2><p>Reusable tax notice component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/tax-rate-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'taxrateinput taxrateinput forms reusable tax rate input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TaxRateInput</h2><p>Reusable tax rate input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/team-member-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'teammembercard teammembercard content reusable team member card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TeamMemberCard</h2><p>Reusable team member card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/team-size-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'teamsizeselector teamsizeselector forms reusable team size selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TeamSizeSelector</h2><p>Reusable team size selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/template-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'templatecard templatecard content reusable template card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TemplateCard</h2><p>Reusable template card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/template-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'templateselector templateselector forms reusable template selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TemplateSelector</h2><p>Reusable template selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/template-variable-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'templatevariableinput templatevariableinput forms reusable template variable input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TemplateVariableInput</h2><p>Reusable template variable input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/tenant-isolation-diagram" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'tenantisolationdiagram tenantisolationdiagram visualization reusable tenant isolation diagram component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>TenantIsolationDiagram</h2><p>Reusable tenant isolation diagram component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/terminal-block" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'terminalblock terminalblock content reusable terminal block component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TerminalBlock</h2><p>Reusable terminal block component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/tertiary-button" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'tertiarybutton tertiarybutton actions reusable tertiary button component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>TertiaryButton</h2><p>Reusable tertiary button component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/testimonial-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'testimonialcard testimonialcard content reusable testimonial card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TestimonialCard</h2><p>Reusable testimonial card component.</p><div class="component-card-meta"><span>6 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/testimonial-carousel" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'testimonialcarousel testimonialcarousel content reusable testimonial carousel component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TestimonialCarousel</h2><p>Reusable testimonial carousel component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/test-message-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'testmessagedialog testmessagedialog overlays reusable test message dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>TestMessageDialog</h2><p>Reusable test message dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/textarea" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'textarea textarea core reusable textarea component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Textarea</h2><p>Reusable textarea component.</p><div class="component-card-meta"><span>11 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/text-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'textinput textinput forms reusable text input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TextInput</h2><p>Reusable text input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/text-link" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'textlink textlink actions reusable text link component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>TextLink</h2><p>Reusable text link component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/text-skeleton" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'textskeleton textskeleton feedback reusable text skeleton component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>TextSkeleton</h2><p>Reusable text skeleton component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/theme-toggle" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'theme-toggle theme-toggle core reusable theme-toggle component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>theme-toggle</h2><p>Reusable theme-toggle component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/theme-color-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'themecolorpicker themecolorpicker forms reusable theme color picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ThemeColorPicker</h2><p>Reusable theme color picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/theme-switcher" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'themeswitcher themeswitcher content reusable theme switcher component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ThemeSwitcher</h2><p>Reusable theme switcher component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/time-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timeinput timeinput forms reusable time input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimeInput</h2><p>Reusable time input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/timeline" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'timeline timeline visualization reusable timeline component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>Timeline</h2><p>Reusable timeline component.</p><div class="component-card-meta"><span>2 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/timeline-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'timelinechart timelinechart visualization reusable timeline chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>TimelineChart</h2><p>Reusable timeline chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/timeline-item" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'timelineitem timelineitem content reusable timeline item component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TimelineItem</h2><p>Reusable timeline item component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/timeout-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timeoutinput timeoutinput forms reusable timeout input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimeoutInput</h2><p>Reusable timeout input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timepicker timepicker forms reusable time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimePicker</h2><p>Reusable time picker component.</p><div class="component-card-meta"><span>10 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/time-range-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timerangepicker timerangepicker forms reusable time range picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimeRangePicker</h2><p>Reusable time range picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/timezone-aware-time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timezoneawaretimepicker timezoneawaretimepicker forms reusable timezone aware time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimezoneAwareTimePicker</h2><p>Reusable timezone aware time picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/timezone-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timezoneselector timezoneselector forms reusable timezone selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimezoneSelector</h2><p>Reusable timezone selector component.</p><div class="component-card-meta"><span>4 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/toast" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'toast toast core reusable toast component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Toast</h2><p>Reusable toast component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/toast-action" data-show="(category === 'All' ? true : category === 'actions') ? (query === '' ? true : 'toastaction toastaction actions reusable toast action component.'.includes(query.toLowerCase())) : false"><span class="category">actions</span><h2>ToastAction</h2><p>Reusable toast action component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/toast-host" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'toasthost toasthost core reusable toast host component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>ToastHost</h2><p>Reusable toast host component.</p><div class="component-card-meta"><span>1 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/toast-icon" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'toasticon toasticon content reusable toast icon component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ToastIcon</h2><p>Reusable toast icon component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/toast-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'toastprogress toastprogress visualization reusable toast progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>ToastProgress</h2><p>Reusable toast progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/toggle" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'toggle toggle forms reusable toggle component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Toggle</h2><p>Reusable toggle component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/toggle-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'togglegroup togglegroup forms reusable toggle group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ToggleGroup</h2><p>Reusable toggle group component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/token-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'tokeninput tokeninput forms reusable token input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TokenInput</h2><p>Reusable token input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/tooltip" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'tooltip tooltip content reusable tooltip component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Tooltip</h2><p>Reusable tooltip component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/totp-verification-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'totpverificationform totpverificationform content reusable totp verification form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TotpVerificationForm</h2><p>Reusable totp verification form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/translated-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'translatedtext translatedtext content reusable translated text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TranslatedText</h2><p>Reusable translated text component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/tree-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'treetable treetable data reusable tree table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>TreeTable</h2><p>Reusable tree table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/trend-indicator" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'trendindicator trendindicator feedback reusable trend indicator component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>TrendIndicator</h2><p>Reusable trend indicator component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/truncated-text" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'truncatedtext truncatedtext content reusable truncated text component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>TruncatedText</h2><p>Reusable truncated text component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/trust-badge-list" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'trustbadgelist trustbadgelist data reusable trust badge list component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>TrustBadgeList</h2><p>Reusable trust badge list component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/typography" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'typography typography core reusable typography component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Typography</h2><p>Reusable typography component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/unavailable-region-state" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'unavailableregionstate unavailableregionstate feedback reusable unavailable region state component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>UnavailableRegionState</h2><p>Reusable unavailable region state component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/unified-timeline-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'unifiedtimelinepreview unifiedtimelinepreview content reusable unified timeline preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>UnifiedTimelinePreview</h2><p>Reusable unified timeline preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/unsaved-changes-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'unsavedchangesdialog unsavedchangesdialog overlays reusable unsaved changes dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>UnsavedChangesDialog</h2><p>Reusable unsaved changes dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/upload-item" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'uploaditem uploaditem content reusable upload item component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>UploadItem</h2><p>Reusable upload item component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/upload-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'uploadpreview uploadpreview content reusable upload preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>UploadPreview</h2><p>Reusable upload preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/upload-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'uploadprogress uploadprogress visualization reusable upload progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>UploadProgress</h2><p>Reusable upload progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/uptime-chart" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'uptimechart uptimechart visualization reusable uptime chart component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>UptimeChart</h2><p>Reusable uptime chart component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/uptime-metric" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'uptimemetric uptimemetric visualization reusable uptime metric component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>UptimeMetric</h2><p>Reusable uptime metric component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/url-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'urlinput urlinput forms reusable url input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>UrlInput</h2><p>Reusable url input component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/usage-pricing-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'usagepricingtable usagepricingtable data reusable usage pricing table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>UsagePricingTable</h2><p>Reusable usage pricing table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/use-case-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'usecaseselector usecaseselector forms reusable use case selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>UseCaseSelector</h2><p>Reusable use case selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/user-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'usercard usercard content reusable user card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>UserCard</h2><p>Reusable user card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/username-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'usernameinput usernameinput forms reusable username input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>UsernameInput</h2><p>Reusable username input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/value-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'valuecard valuecard content reusable value card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ValueCard</h2><p>Reusable value card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/values-grid" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'valuesgrid valuesgrid data reusable values grid component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>ValuesGrid</h2><p>Reusable values grid component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/verification-code-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'verificationcodeinput verificationcodeinput forms reusable verification code input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>VerificationCodeInput</h2><p>Reusable verification code input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/verified-badge" data-show="(category === 'All' ? true : category === 'feedback') ? (query === '' ? true : 'verifiedbadge verifiedbadge feedback reusable verified badge component.'.includes(query.toLowerCase())) : false"><span class="category">feedback</span><h2>VerifiedBadge</h2><p>Reusable verified badge component.</p><div class="component-card-meta"><span>3 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/version-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'versionselector versionselector forms reusable version selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>VersionSelector</h2><p>Reusable version selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/vertical-tabs" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'verticaltabs verticaltabs content reusable vertical tabs component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>VerticalTabs</h2><p>Reusable vertical tabs component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/video-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'videocard videocard content reusable video card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>VideoCard</h2><p>Reusable video card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/video-preview-dialog" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'videopreviewdialog videopreviewdialog overlays reusable video preview dialog component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>VideoPreviewDialog</h2><p>Reusable video preview dialog component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/video-upload" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'videoupload videoupload content reusable video upload component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>VideoUpload</h2><p>Reusable video upload component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/virtualized-table" data-show="(category === 'All' ? true : category === 'data') ? (query === '' ? true : 'virtualizedtable virtualizedtable data reusable virtualized table component.'.includes(query.toLowerCase())) : false"><span class="category">data</span><h2>VirtualizedTable</h2><p>Reusable virtualized table component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/vision-section" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'visionsection visionsection layout reusable vision section component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>VisionSection</h2><p>Reusable vision section component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/visually-hidden" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'visuallyhidden visuallyhidden core reusable visually hidden component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>VisuallyHidden</h2><p>Reusable visually hidden component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/voice-script-composer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'voicescriptcomposer voicescriptcomposer content reusable voice script composer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>VoiceScriptComposer</h2><p>Reusable voice script composer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/voice-script-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'voicescripteditor voicescripteditor forms reusable voice script editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>VoiceScriptEditor</h2><p>Reusable voice script editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/volume-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'volumeinput volumeinput forms reusable volume input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>VolumeInput</h2><p>Reusable volume input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/volume-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'volumeslider volumeslider content reusable volume slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>VolumeSlider</h2><p>Reusable volume slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/warning-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'warningcard warningcard content reusable warning card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WarningCard</h2><p>Reusable warning card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/webhook-event-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'webhookeventcard webhookeventcard content reusable webhook event card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WebhookEventCard</h2><p>Reusable webhook event card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/webhook-flow-diagram" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'webhookflowdiagram webhookflowdiagram visualization reusable webhook flow diagram component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>WebhookFlowDiagram</h2><p>Reusable webhook flow diagram component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/webhook-payload-viewer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'webhookpayloadviewer webhookpayloadviewer content reusable webhook payload viewer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WebhookPayloadViewer</h2><p>Reusable webhook payload viewer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/webhook-url-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'webhookurlinput webhookurlinput forms reusable webhook url input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>WebhookUrlInput</h2><p>Reusable webhook url input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/webinar-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'webinarcard webinarcard content reusable webinar card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WebinarCard</h2><p>Reusable webinar card component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/webinar-registration-form" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'webinarregistrationform webinarregistrationform content reusable webinar registration form component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WebinarRegistrationForm</h2><p>Reusable webinar registration form component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/well" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'well well core reusable well component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>Well</h2><p>Reusable well component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/whats-app-composer" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'whatsappcomposer whatsappcomposer content reusable whats app composer component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WhatsAppComposer</h2><p>Reusable whats app composer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/whats-app-number-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'whatsappnumberinput whatsappnumberinput forms reusable whats app number input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>WhatsAppNumberInput</h2><p>Reusable whats app number input component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/whats-app-template-editor" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'whatsapptemplateeditor whatsapptemplateeditor forms reusable whats app template editor component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>WhatsAppTemplateEditor</h2><p>Reusable whats app template editor component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/wide-container" data-show="(category === 'All' ? true : category === 'core') ? (query === '' ? true : 'widecontainer widecontainer core reusable wide container component.'.includes(query.toLowerCase())) : false"><span class="category">core</span><h2>WideContainer</h2><p>Reusable wide container component.</p><div class="component-card-meta"><span>1 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/wizard" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'wizard wizard content reusable wizard component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>Wizard</h2><p>Reusable wizard component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/wizard-header" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'wizardheader wizardheader layout reusable wizard header component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>WizardHeader</h2><p>Reusable wizard header component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/wizard-navigation" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'wizardnavigation wizardnavigation layout reusable wizard navigation component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>WizardNavigation</h2><p>Reusable wizard navigation component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/workflow-canvas-preview" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'workflowcanvaspreview workflowcanvaspreview content reusable workflow canvas preview component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WorkflowCanvasPreview</h2><p>Reusable workflow canvas preview component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/workflow-progress" data-show="(category === 'All' ? true : category === 'visualization') ? (query === '' ? true : 'workflowprogress workflowprogress visualization reusable workflow progress component.'.includes(query.toLowerCase())) : false"><span class="category">visualization</span><h2>WorkflowProgress</h2><p>Reusable workflow progress component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/workspace-card" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'workspacecard workspacecard content reusable workspace card component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WorkspaceCard</h2><p>Reusable workspace card component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/workspace-selector" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'workspaceselector workspaceselector forms reusable workspace selector component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>WorkspaceSelector</h2><p>Reusable workspace selector component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/workspace-switcher" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'workspaceswitcher workspaceswitcher content reusable workspace switcher component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>WorkspaceSwitcher</h2><p>Reusable workspace switcher component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/year-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'yearpicker yearpicker forms reusable year picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>YearPicker</h2><p>Reusable year picker component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
+<a class="component-card" href="/components/zoom-slider" data-show="(category === 'All' ? true : category === 'content') ? (query === '' ? true : 'zoomslider zoomslider content reusable zoom slider component.'.includes(query.toLowerCase())) : false"><span class="category">content</span><h2>ZoomSlider</h2><p>Reusable zoom slider component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a></section></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/accept-all-cookies-button.wrn b/app/pages/components/accept-all-cookies-button.wrn
new file mode 100644
index 00000000..8b0370f6
--- /dev/null
+++ b/app/pages/components/accept-all-cookies-button.wrn
@@ -0,0 +1,32 @@
+page AcceptAllCookiesButtoncomponent {
+  seo {
+    title = "AcceptAllCookiesButton component"
+    description = "Reusable accept all cookies button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AcceptAllCookiesButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>AcceptAllCookiesButton</h1><p>Reusable accept all cookies button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AcceptAllCookiesButton label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AcceptAllCookiesButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AcceptAllCookiesButton.wrn</code></p><pre data-language="wrn"><code>component AcceptAllCookiesButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/accessible-accordion.wrn b/app/pages/components/accessible-accordion.wrn
new file mode 100644
index 00000000..45047124
--- /dev/null
+++ b/app/pages/components/accessible-accordion.wrn
@@ -0,0 +1,34 @@
+page AccessibleAccordioncomponent {
+  seo {
+    title = "AccessibleAccordion component"
+    description = "Reusable accessible accordion component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AccessibleAccordion</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AccessibleAccordion</h1><p>Reusable accessible accordion component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AccessibleAccordion eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AccessibleAccordion&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AccessibleAccordion.wrn</code></p><pre data-language="wrn"><code>component AccessibleAccordion &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/accessible-carousel.wrn b/app/pages/components/accessible-carousel.wrn
new file mode 100644
index 00000000..8aa3005d
--- /dev/null
+++ b/app/pages/components/accessible-carousel.wrn
@@ -0,0 +1,34 @@
+page AccessibleCarouselcomponent {
+  seo {
+    title = "AccessibleCarousel component"
+    description = "Reusable accessible carousel component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AccessibleCarousel</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AccessibleCarousel</h1><p>Reusable accessible carousel component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AccessibleCarousel eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AccessibleCarousel&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AccessibleCarousel.wrn</code></p><pre data-language="wrn"><code>component AccessibleCarousel &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/accessible-chart-summary.wrn b/app/pages/components/accessible-chart-summary.wrn
new file mode 100644
index 00000000..0eade6eb
--- /dev/null
+++ b/app/pages/components/accessible-chart-summary.wrn
@@ -0,0 +1,34 @@
+page AccessibleChartSummarycomponent {
+  seo {
+    title = "AccessibleChartSummary component"
+    description = "Reusable accessible chart summary component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AccessibleChartSummary</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AccessibleChartSummary</h1><p>Reusable accessible chart summary component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AccessibleChartSummary eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AccessibleChartSummary&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AccessibleChartSummary.wrn</code></p><pre data-language="wrn"><code>component AccessibleChartSummary &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/accessible-dialog.wrn b/app/pages/components/accessible-dialog.wrn
new file mode 100644
index 00000000..520e2457
--- /dev/null
+++ b/app/pages/components/accessible-dialog.wrn
@@ -0,0 +1,31 @@
+page AccessibleDialogcomponent {
+  seo {
+    title = "AccessibleDialog component"
+    description = "Reusable accessible dialog component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AccessibleDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>AccessibleDialog</h1><p>Reusable accessible dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AccessibleDialog title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AccessibleDialog&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AccessibleDialog.wrn</code></p><pre data-language="wrn"><code>component AccessibleDialog &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/accessible-error-summary.wrn b/app/pages/components/accessible-error-summary.wrn
new file mode 100644
index 00000000..2d759916
--- /dev/null
+++ b/app/pages/components/accessible-error-summary.wrn
@@ -0,0 +1,34 @@
+page AccessibleErrorSummarycomponent {
+  seo {
+    title = "AccessibleErrorSummary component"
+    description = "Reusable accessible error summary component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AccessibleErrorSummary</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AccessibleErrorSummary</h1><p>Reusable accessible error summary component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AccessibleErrorSummary eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AccessibleErrorSummary&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AccessibleErrorSummary.wrn</code></p><pre data-language="wrn"><code>component AccessibleErrorSummary &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/accessible-icon.wrn b/app/pages/components/accessible-icon.wrn
new file mode 100644
index 00000000..55a5875b
--- /dev/null
+++ b/app/pages/components/accessible-icon.wrn
@@ -0,0 +1,34 @@
+page AccessibleIconcomponent {
+  seo {
+    title = "AccessibleIcon component"
+    description = "Reusable accessible icon component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AccessibleIcon</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AccessibleIcon</h1><p>Reusable accessible icon component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AccessibleIcon eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AccessibleIcon&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AccessibleIcon.wrn</code></p><pre data-language="wrn"><code>component AccessibleIcon &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/accessible-menu.wrn b/app/pages/components/accessible-menu.wrn
new file mode 100644
index 00000000..eac65f7e
--- /dev/null
+++ b/app/pages/components/accessible-menu.wrn
@@ -0,0 +1,31 @@
+page AccessibleMenucomponent {
+  seo {
+    title = "AccessibleMenu component"
+    description = "Reusable accessible menu component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AccessibleMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>AccessibleMenu</h1><p>Reusable accessible menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AccessibleMenu title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AccessibleMenu&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AccessibleMenu.wrn</code></p><pre data-language="wrn"><code>component AccessibleMenu &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/accessible-tabs.wrn b/app/pages/components/accessible-tabs.wrn
new file mode 100644
index 00000000..73a24aa1
--- /dev/null
+++ b/app/pages/components/accessible-tabs.wrn
@@ -0,0 +1,34 @@
+page AccessibleTabscomponent {
+  seo {
+    title = "AccessibleTabs component"
+    description = "Reusable accessible tabs component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AccessibleTabs</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AccessibleTabs</h1><p>Reusable accessible tabs component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AccessibleTabs eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AccessibleTabs&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AccessibleTabs.wrn</code></p><pre data-language="wrn"><code>component AccessibleTabs &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/accessible-tooltip.wrn b/app/pages/components/accessible-tooltip.wrn
new file mode 100644
index 00000000..399a7703
--- /dev/null
+++ b/app/pages/components/accessible-tooltip.wrn
@@ -0,0 +1,34 @@
+page AccessibleTooltipcomponent {
+  seo {
+    title = "AccessibleTooltip component"
+    description = "Reusable accessible tooltip component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AccessibleTooltip</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AccessibleTooltip</h1><p>Reusable accessible tooltip component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AccessibleTooltip eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AccessibleTooltip&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AccessibleTooltip.wrn</code></p><pre data-language="wrn"><code>component AccessibleTooltip &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/accordion.wrn b/app/pages/components/accordion.wrn
new file mode 100644
index 00000000..e8c22dd5
--- /dev/null
+++ b/app/pages/components/accordion.wrn
@@ -0,0 +1,52 @@
+page Accordioncomponent {
+  seo {
+    title = "Accordion component"
+    description = "Reusable accordion component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Accordion</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>Accordion</h1><p>Reusable accordion component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Accordion title=&quot;Question&quot; open=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Accordion&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Question&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Accordion.wrn</code></p><pre data-language="wrn"><code>component Accordion &#123;
+    props &#123;
+        class = &quot;&quot;
+        title = &quot;Question&quot;
+        open = false
+    &#125;
+
+    state expanded = open
+
+    view &#123;
+        &lt;div class=&quot;border-b border-slate-200 dark:border-slate-800 &#123;class&#125;&quot; &gt;
+            &lt;button
+                type=&quot;button&quot;
+                class=&quot;flex w-full items-center justify-between gap-4 py-5 text-left font-semibold&quot;
+                aria-expanded=&quot;&#123;expanded&#125;&quot;
+                @click=&quot;expanded = !expanded&quot;
+            &gt;
+                &lt;span &gt;
+                    &#123;title&#125;
+                &lt;/span&gt;
+                &lt;span class=&quot;text-xl transition-transform &#123;expanded ? 'rotate-45' : ''&#125;&quot;&gt;+&lt;/span&gt;
+            &lt;/button&gt;
+            &lt;div
+                data-show=&quot;expanded&quot;
+                class=&quot;pb-5 text-slate-600 dark:text-slate-300&quot;
+            &gt;
+                &lt;slot /&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/account-menu.wrn b/app/pages/components/account-menu.wrn
new file mode 100644
index 00000000..ecd732d2
--- /dev/null
+++ b/app/pages/components/account-menu.wrn
@@ -0,0 +1,31 @@
+page AccountMenucomponent {
+  seo {
+    title = "AccountMenu component"
+    description = "Reusable account menu component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AccountMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>AccountMenu</h1><p>Reusable account menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AccountMenu title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AccountMenu&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AccountMenu.wrn</code></p><pre data-language="wrn"><code>component AccountMenu &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/account-status-banner.wrn b/app/pages/components/account-status-banner.wrn
new file mode 100644
index 00000000..4684e0fe
--- /dev/null
+++ b/app/pages/components/account-status-banner.wrn
@@ -0,0 +1,32 @@
+page AccountStatusBannercomponent {
+  seo {
+    title = "AccountStatusBanner component"
+    description = "Reusable account status banner component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AccountStatusBanner</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>AccountStatusBanner</h1><p>Reusable account status banner component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AccountStatusBanner label=&quot;AccountStatus&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AccountStatusBanner&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;AccountStatus&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AccountStatusBanner.wrn</code></p><pre data-language="wrn"><code>component AccountStatusBanner &#123;
+  props &#123;
+    label = &quot;AccountStatus&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/action-menu.wrn b/app/pages/components/action-menu.wrn
new file mode 100644
index 00000000..7158c903
--- /dev/null
+++ b/app/pages/components/action-menu.wrn
@@ -0,0 +1,31 @@
+page ActionMenucomponent {
+  seo {
+    title = "ActionMenu component"
+    description = "Reusable action menu component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ActionMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>ActionMenu</h1><p>Reusable action menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ActionMenu title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ActionMenu&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ActionMenu.wrn</code></p><pre data-language="wrn"><code>component ActionMenu &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/active-filter-list.wrn b/app/pages/components/active-filter-list.wrn
new file mode 100644
index 00000000..3b968123
--- /dev/null
+++ b/app/pages/components/active-filter-list.wrn
@@ -0,0 +1,31 @@
+page ActiveFilterListcomponent {
+  seo {
+    title = "ActiveFilterList component"
+    description = "Reusable active filter list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ActiveFilterList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ActiveFilterList</h1><p>Reusable active filter list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ActiveFilterList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ActiveFilterList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ActiveFilterList.wrn</code></p><pre data-language="wrn"><code>component ActiveFilterList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/activity-list.wrn b/app/pages/components/activity-list.wrn
new file mode 100644
index 00000000..4ddbc3b9
--- /dev/null
+++ b/app/pages/components/activity-list.wrn
@@ -0,0 +1,31 @@
+page ActivityListcomponent {
+  seo {
+    title = "ActivityList component"
+    description = "Reusable activity list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ActivityList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ActivityList</h1><p>Reusable activity list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ActivityList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ActivityList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ActivityList.wrn</code></p><pre data-language="wrn"><code>component ActivityList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/add-on-card.wrn b/app/pages/components/add-on-card.wrn
new file mode 100644
index 00000000..dc34fdab
--- /dev/null
+++ b/app/pages/components/add-on-card.wrn
@@ -0,0 +1,34 @@
+page AddOnCardcomponent {
+  seo {
+    title = "AddOnCard component"
+    description = "Reusable add on card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AddOnCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AddOnCard</h1><p>Reusable add on card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AddOnCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AddOnCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AddOnCard.wrn</code></p><pre data-language="wrn"><code>component AddOnCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/address-input.wrn b/app/pages/components/address-input.wrn
new file mode 100644
index 00000000..47567a52
--- /dev/null
+++ b/app/pages/components/address-input.wrn
@@ -0,0 +1,37 @@
+page AddressInputcomponent {
+  seo {
+    title = "AddressInput component"
+    description = "Reusable address input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AddressInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>AddressInput</h1><p>Reusable address input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AddressInput label=&quot;Address&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AddressInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Address&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AddressInput.wrn</code></p><pre data-language="wrn"><code>component AddressInput &#123;
+  props &#123;
+    label = &quot;Address&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/address-preview.wrn b/app/pages/components/address-preview.wrn
new file mode 100644
index 00000000..18948546
--- /dev/null
+++ b/app/pages/components/address-preview.wrn
@@ -0,0 +1,34 @@
+page AddressPreviewcomponent {
+  seo {
+    title = "AddressPreview component"
+    description = "Reusable address preview component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AddressPreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AddressPreview</h1><p>Reusable address preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AddressPreview eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AddressPreview&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AddressPreview.wrn</code></p><pre data-language="wrn"><code>component AddressPreview &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/advanced-filter-builder.wrn b/app/pages/components/advanced-filter-builder.wrn
new file mode 100644
index 00000000..1a342a68
--- /dev/null
+++ b/app/pages/components/advanced-filter-builder.wrn
@@ -0,0 +1,34 @@
+page AdvancedFilterBuildercomponent {
+  seo {
+    title = "AdvancedFilterBuilder component"
+    description = "Reusable advanced filter builder component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AdvancedFilterBuilder</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AdvancedFilterBuilder</h1><p>Reusable advanced filter builder component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AdvancedFilterBuilder eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AdvancedFilterBuilder&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AdvancedFilterBuilder.wrn</code></p><pre data-language="wrn"><code>component AdvancedFilterBuilder &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/alert-dialog.wrn b/app/pages/components/alert-dialog.wrn
new file mode 100644
index 00000000..2a552efe
--- /dev/null
+++ b/app/pages/components/alert-dialog.wrn
@@ -0,0 +1,31 @@
+page AlertDialogcomponent {
+  seo {
+    title = "AlertDialog component"
+    description = "Reusable alert dialog component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AlertDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>AlertDialog</h1><p>Reusable alert dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AlertDialog title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AlertDialog&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AlertDialog.wrn</code></p><pre data-language="wrn"><code>component AlertDialog &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/alert.wrn b/app/pages/components/alert.wrn
new file mode 100644
index 00000000..ba4a8e45
--- /dev/null
+++ b/app/pages/components/alert.wrn
@@ -0,0 +1,64 @@
+page Alertcomponent {
+  seo {
+    title = "Alert component"
+    description = "Reusable alert component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Alert</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>Alert</h1><p>Reusable alert component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Alert title=&quot;Notice&quot; description=&quot;description&quot; variant=&quot;info&quot; dismissible=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Alert&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Notice&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;info&quot;</code></td></tr><tr><td><code>dismissible</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Alert.wrn</code></p><pre data-language="wrn"><code>component Alert &#123;
+    props &#123;
+        class = &quot;&quot;
+        title = &quot;Notice&quot;
+        description = &quot;&quot;
+        variant = &quot;info&quot;
+        dismissible = false
+    &#125;
+
+    state visible = true
+
+    view &#123;
+        &lt;div
+            data-show=&quot;visible&quot;
+            role=&quot;alert&quot;
+            class=&quot;flex items-start gap-3 rounded-2xl border p-4 &#123;variant === 'success' ? 'border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200' : variant === 'warning' ? 'border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-200' : variant === 'danger' ? 'border-red-200 bg-red-50 text-red-900 dark:border-red-900 dark:bg-red-950/40 dark:text-red-200' : 'border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-900 dark:bg-blue-950/40 dark:text-blue-200'&#125; &#123;class&#125;&quot;
+        &gt;
+            &lt;div class=&quot;min-w-0 flex-1&quot; &gt;
+                &lt;h3 class=&quot;font-semibold&quot; &gt;
+                    &#123;title&#125;
+                &lt;/h3&gt;
+                &lt;p
+                    data-show=&quot;description&quot;
+                    class=&quot;mt-1 text-sm opacity-80&quot;
+                &gt;
+                    &#123;description&#125;
+                &lt;/p&gt;
+                &lt;div class=&quot;mt-2&quot; &gt;
+                    &lt;slot /&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;button
+                data-show=&quot;dismissible&quot;
+                type=&quot;button&quot;
+                aria-label=&quot;Dismiss&quot;
+                @click=&quot;visible = false&quot;
+                class=&quot;rounded-lg p-1 hover:bg-black/5&quot;
+            &gt;
+                ×
+            &lt;/button&gt;
+        &lt;/div&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/amount-input.wrn b/app/pages/components/amount-input.wrn
new file mode 100644
index 00000000..0e6e8fd8
--- /dev/null
+++ b/app/pages/components/amount-input.wrn
@@ -0,0 +1,37 @@
+page AmountInputcomponent {
+  seo {
+    title = "AmountInput component"
+    description = "Reusable amount input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AmountInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>AmountInput</h1><p>Reusable amount input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AmountInput label=&quot;Amount&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AmountInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Amount&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AmountInput.wrn</code></p><pre data-language="wrn"><code>component AmountInput &#123;
+  props &#123;
+    label = &quot;Amount&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/analytics-dashboard-preview.wrn b/app/pages/components/analytics-dashboard-preview.wrn
new file mode 100644
index 00000000..51b1bfe1
--- /dev/null
+++ b/app/pages/components/analytics-dashboard-preview.wrn
@@ -0,0 +1,34 @@
+page AnalyticsDashboardPreviewcomponent {
+  seo {
+    title = "AnalyticsDashboardPreview component"
+    description = "Reusable analytics dashboard preview component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AnalyticsDashboardPreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AnalyticsDashboardPreview</h1><p>Reusable analytics dashboard preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AnalyticsDashboardPreview eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AnalyticsDashboardPreview&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AnalyticsDashboardPreview.wrn</code></p><pre data-language="wrn"><code>component AnalyticsDashboardPreview &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/anchor-navigation.wrn b/app/pages/components/anchor-navigation.wrn
new file mode 100644
index 00000000..04264f64
--- /dev/null
+++ b/app/pages/components/anchor-navigation.wrn
@@ -0,0 +1,31 @@
+page AnchorNavigationcomponent {
+  seo {
+    title = "AnchorNavigation component"
+    description = "Reusable anchor navigation component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AnchorNavigation</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>AnchorNavigation</h1><p>Reusable anchor navigation component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AnchorNavigation eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AnchorNavigation&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AnchorNavigation.wrn</code></p><pre data-language="wrn"><code>component AnchorNavigation &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/announcement-bar.wrn b/app/pages/components/announcement-bar.wrn
new file mode 100644
index 00000000..62762cd1
--- /dev/null
+++ b/app/pages/components/announcement-bar.wrn
@@ -0,0 +1,110 @@
+page AnnouncementBarcomponent {
+  seo {
+    title = "AnnouncementBar component"
+    description = "Reusable announcement bar component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AnnouncementBar</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>AnnouncementBar</h1><p>Reusable announcement bar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>7 props</span><span>0 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AnnouncementBar badge=&quot;New&quot; message=&quot;WRNexusJS Organizations is now available.&quot; description=&quot;Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO.&quot; href=&quot;/organizations&quot; actionLabel=&quot;Explore organizations&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AnnouncementBar&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>badge</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;New&quot;</code></td></tr><tr><td><code>message</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;WRNexusJS Organizations is now available.&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO.&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;/organizations&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Explore organizations&quot;</code></td></tr><tr><td><code>ariaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Announcement&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AnnouncementBar.wrn</code></p><pre data-language="wrn"><code>component AnnouncementBar &#123;
+    props &#123;
+        class = &quot;&quot;
+        badge = &quot;New&quot;
+        message = &quot;WRNexusJS Organizations is now available.&quot;
+        description = &quot;Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO.&quot;
+        href = &quot;/organizations&quot;
+        actionLabel = &quot;Explore organizations&quot;
+        ariaLabel = &quot;Announcement&quot;
+    &#125;
+
+    state visible = true
+
+    view &#123;
+        &lt;aside
+            role=&quot;region&quot;
+            aria-label=&quot;&#123;ariaLabel&#125;&quot;
+            class=&quot;relative z-[70] overflow-hidden border-b border-indigo-200 bg-indigo-50 text-slate-900 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-white &#123;class&#125;&quot;
+            class:hidden=&quot;!visible&quot;
+        &gt;
+            &lt;!-- Decorative background --&gt;
+            &lt;div
+                aria-hidden=&quot;true&quot;
+                class=&quot;pointer-events-none absolute inset-0 overflow-hidden&quot;
+            &gt;
+                &lt;div class=&quot;absolute -left-20 -top-24 h-40 w-40 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10&quot;&gt;&lt;/div&gt;
+
+                &lt;div class=&quot;absolute -right-20 -bottom-24 h-40 w-40 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10&quot;&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div
+                class=&quot;relative flex min-h-11 w-full items-center justify-between gap-4 px-4 py-2.5 sm:px-6 lg:px-10 xl:px-12&quot;
+            &gt;
+                &lt;div class=&quot;flex min-w-0 flex-1 items-center justify-center gap-3&quot;&gt;
+                    &lt;!-- Badge --&gt;
+                    &lt;span
+                        class=&quot;hidden shrink-0 items-center gap-1.5 rounded-full bg-indigo-600 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.12em] text-white shadow-sm sm:inline-flex&quot;
+                    &gt;
+                        &lt;span class=&quot;icon-[lucide--sparkles] h-3 w-3&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                        &#123;badge&#125;
+                    &lt;/span&gt;
+
+                    &lt;!-- Message --&gt;
+                    &lt;p
+                        class=&quot;min-w-0 text-center text-xs font-medium leading-5 text-slate-700 dark:text-slate-300 sm:text-sm&quot;
+                    &gt;
+                        &lt;span class=&quot;font-semibold text-slate-950 dark:text-white&quot;&gt;
+                            &#123;message&#125;
+                        &lt;/span&gt;
+
+                        &lt;span class=&quot;hidden md:inline&quot;&gt;
+                            &#123;description&#125;
+                        &lt;/span&gt;
+                    &lt;/p&gt;
+
+                    &lt;!-- CTA --&gt;
+                    &lt;a
+                        href=&quot;&#123;href&#125;&quot;
+                        class=&quot;group hidden shrink-0 items-center gap-1.5 text-xs font-bold text-indigo-700 transition hover:text-indigo-900 dark:text-indigo-300 dark:hover:text-indigo-200 sm:inline-flex&quot;
+                    &gt;
+                        &#123;actionLabel&#125;
+
+                        &lt;span class=&quot;icon-[lucide--arrow-right] h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/a&gt;
+                &lt;/div&gt;
+
+                &lt;!-- Mobile CTA --&gt;
+                &lt;a
+                    href=&quot;&#123;href&#125;&quot;
+                    aria-label=&quot;&#123;actionLabel&#125;&quot;
+                    class=&quot;grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-indigo-100 text-indigo-700 transition hover:bg-indigo-200 dark:bg-indigo-500/15 dark:text-indigo-300 dark:hover:bg-indigo-500/25 sm:hidden&quot;
+                &gt;
+                    &lt;span class=&quot;icon-[lucide--arrow-up-right] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                &lt;/a&gt;
+
+                &lt;!-- Close --&gt;
+                &lt;button
+                    type=&quot;button&quot;
+                    @click=&quot;visible = false&quot;
+                    aria-label=&quot;Dismiss announcement&quot;
+                    class=&quot;grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-500 transition hover:bg-indigo-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-400 dark:hover:bg-white/10 dark:hover:text-white&quot;
+                &gt;
+                    &lt;span class=&quot;icon-[lucide--x] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                &lt;/button&gt;
+            &lt;/div&gt;
+        &lt;/aside&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/apartment-input.wrn b/app/pages/components/apartment-input.wrn
new file mode 100644
index 00000000..16244c34
--- /dev/null
+++ b/app/pages/components/apartment-input.wrn
@@ -0,0 +1,37 @@
+page ApartmentInputcomponent {
+  seo {
+    title = "ApartmentInput component"
+    description = "Reusable apartment input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApartmentInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ApartmentInput</h1><p>Reusable apartment input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ApartmentInput label=&quot;Apartment&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ApartmentInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Apartment&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApartmentInput.wrn</code></p><pre data-language="wrn"><code>component ApartmentInput &#123;
+  props &#123;
+    label = &quot;Apartment&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/api-authentication-notice.wrn b/app/pages/components/api-authentication-notice.wrn
new file mode 100644
index 00000000..8b85ae3b
--- /dev/null
+++ b/app/pages/components/api-authentication-notice.wrn
@@ -0,0 +1,32 @@
+page ApiAuthenticationNoticecomponent {
+  seo {
+    title = "ApiAuthenticationNotice component"
+    description = "Reusable api authentication notice component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiAuthenticationNotice</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>ApiAuthenticationNotice</h1><p>Reusable api authentication notice component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ApiAuthenticationNotice label=&quot;ApiAuthentication&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ApiAuthenticationNotice&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;ApiAuthentication&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiAuthenticationNotice.wrn</code></p><pre data-language="wrn"><code>component ApiAuthenticationNotice &#123;
+  props &#123;
+    label = &quot;ApiAuthentication&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/api-endpoint-card.wrn b/app/pages/components/api-endpoint-card.wrn
new file mode 100644
index 00000000..2e349c03
--- /dev/null
+++ b/app/pages/components/api-endpoint-card.wrn
@@ -0,0 +1,55 @@
+page ApiEndpointCardcomponent {
+  seo {
+    title = "ApiEndpointCard component"
+    description = "Reusable api endpoint card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiEndpointCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ApiEndpointCard</h1><p>Reusable api endpoint card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ApiEndpointCard method=&quot;GET&quot; path=&quot;/api/example&quot; description=&quot;description&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ApiEndpointCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>method</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;GET&quot;</code></td></tr><tr><td><code>path</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;/api/example&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiEndpointCard.wrn</code></p><pre data-language="wrn"><code>component ApiEndpointCard &#123;
+    props &#123;
+        class = &quot;&quot;
+        method = &quot;GET&quot;
+        path = &quot;/api/example&quot;
+        description = &quot;&quot;
+    &#125;
+
+    view &#123;
+        &lt;article
+            class=&quot;rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900 &#123;class&#125;&quot;
+        &gt;
+            &lt;div class=&quot;flex flex-wrap items-center gap-3&quot; &gt;
+                &lt;span
+                    class=&quot;rounded-lg px-2.5 py-1 font-mono text-xs font-bold &#123;method === 'GET' ? 'bg-emerald-100 text-emerald-700' : method === 'POST' ? 'bg-blue-100 text-blue-700' : method === 'DELETE' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700'&#125;&quot;
+                &gt;
+                    &#123;method&#125;
+                &lt;/span&gt;
+                &lt;code class=&quot;text-sm font-semibold&quot;&gt;
+                    &#123;path&#125;
+                &lt;/code&gt;
+            &lt;/div&gt;
+            &lt;p
+                data-show=&quot;description&quot;
+                class=&quot;mt-3 text-sm text-slate-500&quot;
+            &gt;
+                &#123;description&#125;
+            &lt;/p&gt;
+            &lt;div class=&quot;mt-4&quot;&gt;
+                &lt;slot /&gt;
+            &lt;/div&gt;
+        &lt;/article&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/api-error-example.wrn b/app/pages/components/api-error-example.wrn
new file mode 100644
index 00000000..e6e53bb7
--- /dev/null
+++ b/app/pages/components/api-error-example.wrn
@@ -0,0 +1,34 @@
+page ApiErrorExamplecomponent {
+  seo {
+    title = "ApiErrorExample component"
+    description = "Reusable api error example component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiErrorExample</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ApiErrorExample</h1><p>Reusable api error example component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ApiErrorExample eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ApiErrorExample&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiErrorExample.wrn</code></p><pre data-language="wrn"><code>component ApiErrorExample &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/api-header-table.wrn b/app/pages/components/api-header-table.wrn
new file mode 100644
index 00000000..3de78801
--- /dev/null
+++ b/app/pages/components/api-header-table.wrn
@@ -0,0 +1,31 @@
+page ApiHeaderTablecomponent {
+  seo {
+    title = "ApiHeaderTable component"
+    description = "Reusable api header table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiHeaderTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ApiHeaderTable</h1><p>Reusable api header table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ApiHeaderTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ApiHeaderTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiHeaderTable.wrn</code></p><pre data-language="wrn"><code>component ApiHeaderTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/api-key-create-dialog.wrn b/app/pages/components/api-key-create-dialog.wrn
new file mode 100644
index 00000000..3aad5eef
--- /dev/null
+++ b/app/pages/components/api-key-create-dialog.wrn
@@ -0,0 +1,31 @@
+page ApiKeyCreateDialogcomponent {
+  seo {
+    title = "ApiKeyCreateDialog component"
+    description = "Reusable api key create dialog component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiKeyCreateDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>ApiKeyCreateDialog</h1><p>Reusable api key create dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ApiKeyCreateDialog title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ApiKeyCreateDialog&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiKeyCreateDialog.wrn</code></p><pre data-language="wrn"><code>component ApiKeyCreateDialog &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/api-key-display.wrn b/app/pages/components/api-key-display.wrn
new file mode 100644
index 00000000..1e1c85af
--- /dev/null
+++ b/app/pages/components/api-key-display.wrn
@@ -0,0 +1,34 @@
+page ApiKeyDisplaycomponent {
+  seo {
+    title = "ApiKeyDisplay component"
+    description = "Reusable api key display component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiKeyDisplay</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ApiKeyDisplay</h1><p>Reusable api key display component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ApiKeyDisplay eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ApiKeyDisplay&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiKeyDisplay.wrn</code></p><pre data-language="wrn"><code>component ApiKeyDisplay &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/api-key-input.wrn b/app/pages/components/api-key-input.wrn
new file mode 100644
index 00000000..abcb7026
--- /dev/null
+++ b/app/pages/components/api-key-input.wrn
@@ -0,0 +1,37 @@
+page ApiKeyInputcomponent {
+  seo {
+    title = "ApiKeyInput component"
+    description = "Reusable api key input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiKeyInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ApiKeyInput</h1><p>Reusable api key input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ApiKeyInput label=&quot;ApiKey&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ApiKeyInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;ApiKey&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiKeyInput.wrn</code></p><pre data-language="wrn"><code>component ApiKeyInput &#123;
+  props &#123;
+    label = &quot;ApiKey&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/api-method-badge.wrn b/app/pages/components/api-method-badge.wrn
new file mode 100644
index 00000000..745f1eb2
--- /dev/null
+++ b/app/pages/components/api-method-badge.wrn
@@ -0,0 +1,32 @@
+page ApiMethodBadgecomponent {
+  seo {
+    title = "ApiMethodBadge component"
+    description = "Reusable api method badge component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiMethodBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>ApiMethodBadge</h1><p>Reusable api method badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ApiMethodBadge label=&quot;ApiMethod&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ApiMethodBadge&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;ApiMethod&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiMethodBadge.wrn</code></p><pre data-language="wrn"><code>component ApiMethodBadge &#123;
+  props &#123;
+    label = &quot;ApiMethod&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/api-parameter-table.wrn b/app/pages/components/api-parameter-table.wrn
new file mode 100644
index 00000000..6389d6f8
--- /dev/null
+++ b/app/pages/components/api-parameter-table.wrn
@@ -0,0 +1,31 @@
+page ApiParameterTablecomponent {
+  seo {
+    title = "ApiParameterTable component"
+    description = "Reusable api parameter table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiParameterTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ApiParameterTable</h1><p>Reusable api parameter table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ApiParameterTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ApiParameterTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiParameterTable.wrn</code></p><pre data-language="wrn"><code>component ApiParameterTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/api-rate-limit-notice.wrn b/app/pages/components/api-rate-limit-notice.wrn
new file mode 100644
index 00000000..3217f8c2
--- /dev/null
+++ b/app/pages/components/api-rate-limit-notice.wrn
@@ -0,0 +1,32 @@
+page ApiRateLimitNoticecomponent {
+  seo {
+    title = "ApiRateLimitNotice component"
+    description = "Reusable api rate limit notice component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiRateLimitNotice</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>ApiRateLimitNotice</h1><p>Reusable api rate limit notice component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ApiRateLimitNotice label=&quot;ApiRateLimit&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ApiRateLimitNotice&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;ApiRateLimit&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiRateLimitNotice.wrn</code></p><pre data-language="wrn"><code>component ApiRateLimitNotice &#123;
+  props &#123;
+    label = &quot;ApiRateLimit&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/api-request-example.wrn b/app/pages/components/api-request-example.wrn
new file mode 100644
index 00000000..ef568227
--- /dev/null
+++ b/app/pages/components/api-request-example.wrn
@@ -0,0 +1,34 @@
+page ApiRequestExamplecomponent {
+  seo {
+    title = "ApiRequestExample component"
+    description = "Reusable api request example component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiRequestExample</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ApiRequestExample</h1><p>Reusable api request example component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ApiRequestExample eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ApiRequestExample&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiRequestExample.wrn</code></p><pre data-language="wrn"><code>component ApiRequestExample &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/api-response-example.wrn b/app/pages/components/api-response-example.wrn
new file mode 100644
index 00000000..3da5d190
--- /dev/null
+++ b/app/pages/components/api-response-example.wrn
@@ -0,0 +1,34 @@
+page ApiResponseExamplecomponent {
+  seo {
+    title = "ApiResponseExample component"
+    description = "Reusable api response example component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiResponseExample</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ApiResponseExample</h1><p>Reusable api response example component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ApiResponseExample eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ApiResponseExample&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiResponseExample.wrn</code></p><pre data-language="wrn"><code>component ApiResponseExample &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/api-schema-table.wrn b/app/pages/components/api-schema-table.wrn
new file mode 100644
index 00000000..be5dcf1d
--- /dev/null
+++ b/app/pages/components/api-schema-table.wrn
@@ -0,0 +1,31 @@
+page ApiSchemaTablecomponent {
+  seo {
+    title = "ApiSchemaTable component"
+    description = "Reusable api schema table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiSchemaTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ApiSchemaTable</h1><p>Reusable api schema table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ApiSchemaTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ApiSchemaTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiSchemaTable.wrn</code></p><pre data-language="wrn"><code>component ApiSchemaTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/api-schema-viewer.wrn b/app/pages/components/api-schema-viewer.wrn
new file mode 100644
index 00000000..aef48d4d
--- /dev/null
+++ b/app/pages/components/api-schema-viewer.wrn
@@ -0,0 +1,34 @@
+page ApiSchemaViewercomponent {
+  seo {
+    title = "ApiSchemaViewer component"
+    description = "Reusable api schema viewer component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiSchemaViewer</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ApiSchemaViewer</h1><p>Reusable api schema viewer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ApiSchemaViewer eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ApiSchemaViewer&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiSchemaViewer.wrn</code></p><pre data-language="wrn"><code>component ApiSchemaViewer &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/api-version-badge.wrn b/app/pages/components/api-version-badge.wrn
new file mode 100644
index 00000000..55632ba5
--- /dev/null
+++ b/app/pages/components/api-version-badge.wrn
@@ -0,0 +1,32 @@
+page ApiVersionBadgecomponent {
+  seo {
+    title = "ApiVersionBadge component"
+    description = "Reusable api version badge component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiVersionBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>ApiVersionBadge</h1><p>Reusable api version badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ApiVersionBadge label=&quot;ApiVersion&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ApiVersionBadge&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;ApiVersion&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiVersionBadge.wrn</code></p><pre data-language="wrn"><code>component ApiVersionBadge &#123;
+  props &#123;
+    label = &quot;ApiVersion&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/app-header.wrn b/app/pages/components/app-header.wrn
new file mode 100644
index 00000000..a8cdc10b
--- /dev/null
+++ b/app/pages/components/app-header.wrn
@@ -0,0 +1,31 @@
+page AppHeadercomponent {
+  seo {
+    title = "AppHeader component"
+    description = "Reusable app header component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AppHeader</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>AppHeader</h1><p>Reusable app header component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AppHeader eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AppHeader&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AppHeader.wrn</code></p><pre data-language="wrn"><code>component AppHeader &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/architecture-section.wrn b/app/pages/components/architecture-section.wrn
new file mode 100644
index 00000000..a2d7f851
--- /dev/null
+++ b/app/pages/components/architecture-section.wrn
@@ -0,0 +1,31 @@
+page ArchitectureSectioncomponent {
+  seo {
+    title = "ArchitectureSection component"
+    description = "Reusable architecture section component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ArchitectureSection</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ArchitectureSection</h1><p>Reusable architecture section component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ArchitectureSection eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ArchitectureSection&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ArchitectureSection.wrn</code></p><pre data-language="wrn"><code>component ArchitectureSection &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/area-chart.wrn b/app/pages/components/area-chart.wrn
new file mode 100644
index 00000000..5d661764
--- /dev/null
+++ b/app/pages/components/area-chart.wrn
@@ -0,0 +1,32 @@
+page AreaChartcomponent {
+  seo {
+    title = "AreaChart component"
+    description = "Reusable area chart component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AreaChart</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>AreaChart</h1><p>Reusable area chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AreaChart title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AreaChart&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AreaChart.wrn</code></p><pre data-language="wrn"><code>component AreaChart &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/article-hero.wrn b/app/pages/components/article-hero.wrn
new file mode 100644
index 00000000..14f4675d
--- /dev/null
+++ b/app/pages/components/article-hero.wrn
@@ -0,0 +1,31 @@
+page ArticleHerocomponent {
+  seo {
+    title = "ArticleHero component"
+    description = "Reusable article hero component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ArticleHero</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ArticleHero</h1><p>Reusable article hero component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ArticleHero eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ArticleHero&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ArticleHero.wrn</code></p><pre data-language="wrn"><code>component ArticleHero &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/article-layout.wrn b/app/pages/components/article-layout.wrn
new file mode 100644
index 00000000..145b1c72
--- /dev/null
+++ b/app/pages/components/article-layout.wrn
@@ -0,0 +1,31 @@
+page ArticleLayoutcomponent {
+  seo {
+    title = "ArticleLayout component"
+    description = "Reusable article layout component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ArticleLayout</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ArticleLayout</h1><p>Reusable article layout component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ArticleLayout eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ArticleLayout&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ArticleLayout.wrn</code></p><pre data-language="wrn"><code>component ArticleLayout &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/article-newsletter-cta.wrn b/app/pages/components/article-newsletter-cta.wrn
new file mode 100644
index 00000000..726df8da
--- /dev/null
+++ b/app/pages/components/article-newsletter-cta.wrn
@@ -0,0 +1,32 @@
+page ArticleNewsletterCTAcomponent {
+  seo {
+    title = "ArticleNewsletterCTA component"
+    description = "Reusable article newsletter c t a component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ArticleNewsletterCTA</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>ArticleNewsletterCTA</h1><p>Reusable article newsletter c t a component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ArticleNewsletterCTA label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ArticleNewsletterCTA&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ArticleNewsletterCTA.wrn</code></p><pre data-language="wrn"><code>component ArticleNewsletterCTA &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/article-page-shell.wrn b/app/pages/components/article-page-shell.wrn
new file mode 100644
index 00000000..9e72ff83
--- /dev/null
+++ b/app/pages/components/article-page-shell.wrn
@@ -0,0 +1,31 @@
+page ArticlePageShellcomponent {
+  seo {
+    title = "ArticlePageShell component"
+    description = "Reusable article page shell component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ArticlePageShell</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ArticlePageShell</h1><p>Reusable article page shell component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ArticlePageShell eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ArticlePageShell&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ArticlePageShell.wrn</code></p><pre data-language="wrn"><code>component ArticlePageShell &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/article-share-actions.wrn b/app/pages/components/article-share-actions.wrn
new file mode 100644
index 00000000..8fe64ab1
--- /dev/null
+++ b/app/pages/components/article-share-actions.wrn
@@ -0,0 +1,32 @@
+page ArticleShareActionscomponent {
+  seo {
+    title = "ArticleShareActions component"
+    description = "Reusable article share actions component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ArticleShareActions</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>ArticleShareActions</h1><p>Reusable article share actions component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ArticleShareActions label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ArticleShareActions&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ArticleShareActions.wrn</code></p><pre data-language="wrn"><code>component ArticleShareActions &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/aspect-ratio.wrn b/app/pages/components/aspect-ratio.wrn
new file mode 100644
index 00000000..7fd185b4
--- /dev/null
+++ b/app/pages/components/aspect-ratio.wrn
@@ -0,0 +1,27 @@
+page AspectRatiocomponent {
+  seo {
+    title = "AspectRatio component"
+    description = "Reusable aspect ratio component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AspectRatio</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>AspectRatio</h1><p>Reusable aspect ratio component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AspectRatio /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AspectRatio&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AspectRatio.wrn</code></p><pre data-language="wrn"><code>component AspectRatio &#123;
+  props &#123;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-aspect-ratio &#123;class&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/asset-card.wrn b/app/pages/components/asset-card.wrn
new file mode 100644
index 00000000..c28e46ab
--- /dev/null
+++ b/app/pages/components/asset-card.wrn
@@ -0,0 +1,30 @@
+page AssetCardcomponent {
+  seo {
+    title = "AssetCard component"
+    description = "Reusable asset card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AssetCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AssetCard</h1><p>Reusable asset card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AssetCard title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AssetCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AssetCard.wrn</code></p><pre data-language="wrn"><code>component AssetCard &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card wire-catalog-card--asset &#123;class&#125;&quot;&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-catalog-card__link&quot;&gt;&lt;span class=&quot;wire-visually-hidden&quot;&gt;Open &#123;title&#125;&lt;/span&gt;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/attachment-picker.wrn b/app/pages/components/attachment-picker.wrn
new file mode 100644
index 00000000..812e4f88
--- /dev/null
+++ b/app/pages/components/attachment-picker.wrn
@@ -0,0 +1,37 @@
+page AttachmentPickercomponent {
+  seo {
+    title = "AttachmentPicker component"
+    description = "Reusable attachment picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AttachmentPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>AttachmentPicker</h1><p>Reusable attachment picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AttachmentPicker label=&quot;Attachment&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AttachmentPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Attachment&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AttachmentPicker.wrn</code></p><pre data-language="wrn"><code>component AttachmentPicker &#123;
+  props &#123;
+    label = &quot;Attachment&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/attachment-upload.wrn b/app/pages/components/attachment-upload.wrn
new file mode 100644
index 00000000..1d251e0c
--- /dev/null
+++ b/app/pages/components/attachment-upload.wrn
@@ -0,0 +1,34 @@
+page AttachmentUploadcomponent {
+  seo {
+    title = "AttachmentUpload component"
+    description = "Reusable attachment upload component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AttachmentUpload</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AttachmentUpload</h1><p>Reusable attachment upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AttachmentUpload eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AttachmentUpload&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AttachmentUpload.wrn</code></p><pre data-language="wrn"><code>component AttachmentUpload &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/audio-upload.wrn b/app/pages/components/audio-upload.wrn
new file mode 100644
index 00000000..c154415c
--- /dev/null
+++ b/app/pages/components/audio-upload.wrn
@@ -0,0 +1,34 @@
+page AudioUploadcomponent {
+  seo {
+    title = "AudioUpload component"
+    description = "Reusable audio upload component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AudioUpload</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AudioUpload</h1><p>Reusable audio upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AudioUpload eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AudioUpload&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AudioUpload.wrn</code></p><pre data-language="wrn"><code>component AudioUpload &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/audit-log-preview.wrn b/app/pages/components/audit-log-preview.wrn
new file mode 100644
index 00000000..f574eb1a
--- /dev/null
+++ b/app/pages/components/audit-log-preview.wrn
@@ -0,0 +1,34 @@
+page AuditLogPreviewcomponent {
+  seo {
+    title = "AuditLogPreview component"
+    description = "Reusable audit log preview component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AuditLogPreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AuditLogPreview</h1><p>Reusable audit log preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AuditLogPreview eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AuditLogPreview&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AuditLogPreview.wrn</code></p><pre data-language="wrn"><code>component AuditLogPreview &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/audit-table.wrn b/app/pages/components/audit-table.wrn
new file mode 100644
index 00000000..9968f21c
--- /dev/null
+++ b/app/pages/components/audit-table.wrn
@@ -0,0 +1,31 @@
+page AuditTablecomponent {
+  seo {
+    title = "AuditTable component"
+    description = "Reusable audit table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AuditTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>AuditTable</h1><p>Reusable audit table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AuditTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AuditTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AuditTable.wrn</code></p><pre data-language="wrn"><code>component AuditTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/authenticator-code-input.wrn b/app/pages/components/authenticator-code-input.wrn
new file mode 100644
index 00000000..261b4a2f
--- /dev/null
+++ b/app/pages/components/authenticator-code-input.wrn
@@ -0,0 +1,37 @@
+page AuthenticatorCodeInputcomponent {
+  seo {
+    title = "AuthenticatorCodeInput component"
+    description = "Reusable authenticator code input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AuthenticatorCodeInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>AuthenticatorCodeInput</h1><p>Reusable authenticator code input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AuthenticatorCodeInput label=&quot;AuthenticatorCode&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AuthenticatorCodeInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;AuthenticatorCode&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AuthenticatorCodeInput.wrn</code></p><pre data-language="wrn"><code>component AuthenticatorCodeInput &#123;
+  props &#123;
+    label = &quot;AuthenticatorCode&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/author-avatar.wrn b/app/pages/components/author-avatar.wrn
new file mode 100644
index 00000000..ac06e780
--- /dev/null
+++ b/app/pages/components/author-avatar.wrn
@@ -0,0 +1,34 @@
+page AuthorAvatarcomponent {
+  seo {
+    title = "AuthorAvatar component"
+    description = "Reusable author avatar component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AuthorAvatar</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AuthorAvatar</h1><p>Reusable author avatar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AuthorAvatar eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AuthorAvatar&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AuthorAvatar.wrn</code></p><pre data-language="wrn"><code>component AuthorAvatar &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/author-card.wrn b/app/pages/components/author-card.wrn
new file mode 100644
index 00000000..5dd92338
--- /dev/null
+++ b/app/pages/components/author-card.wrn
@@ -0,0 +1,34 @@
+page AuthorCardcomponent {
+  seo {
+    title = "AuthorCard component"
+    description = "Reusable author card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AuthorCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AuthorCard</h1><p>Reusable author card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AuthorCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AuthorCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AuthorCard.wrn</code></p><pre data-language="wrn"><code>component AuthorCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/authorized-application-card.wrn b/app/pages/components/authorized-application-card.wrn
new file mode 100644
index 00000000..fbc14e6c
--- /dev/null
+++ b/app/pages/components/authorized-application-card.wrn
@@ -0,0 +1,34 @@
+page AuthorizedApplicationCardcomponent {
+  seo {
+    title = "AuthorizedApplicationCard component"
+    description = "Reusable authorized application card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AuthorizedApplicationCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AuthorizedApplicationCard</h1><p>Reusable authorized application card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AuthorizedApplicationCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AuthorizedApplicationCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AuthorizedApplicationCard.wrn</code></p><pre data-language="wrn"><code>component AuthorizedApplicationCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/auto-grid.wrn b/app/pages/components/auto-grid.wrn
new file mode 100644
index 00000000..438630d1
--- /dev/null
+++ b/app/pages/components/auto-grid.wrn
@@ -0,0 +1,27 @@
+page AutoGridcomponent {
+  seo {
+    title = "AutoGrid component"
+    description = "Reusable auto grid component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AutoGrid</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>AutoGrid</h1><p>Reusable auto grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AutoGrid /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AutoGrid&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AutoGrid.wrn</code></p><pre data-language="wrn"><code>component AutoGrid &#123;
+  props &#123;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-auto-grid &#123;class&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/automation-example-card.wrn b/app/pages/components/automation-example-card.wrn
new file mode 100644
index 00000000..cee9e70b
--- /dev/null
+++ b/app/pages/components/automation-example-card.wrn
@@ -0,0 +1,34 @@
+page AutomationExampleCardcomponent {
+  seo {
+    title = "AutomationExampleCard component"
+    description = "Reusable automation example card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AutomationExampleCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AutomationExampleCard</h1><p>Reusable automation example card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AutomationExampleCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AutomationExampleCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AutomationExampleCard.wrn</code></p><pre data-language="wrn"><code>component AutomationExampleCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/availability-calendar.wrn b/app/pages/components/availability-calendar.wrn
new file mode 100644
index 00000000..65ff83db
--- /dev/null
+++ b/app/pages/components/availability-calendar.wrn
@@ -0,0 +1,34 @@
+page AvailabilityCalendarcomponent {
+  seo {
+    title = "AvailabilityCalendar component"
+    description = "Reusable availability calendar component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AvailabilityCalendar</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AvailabilityCalendar</h1><p>Reusable availability calendar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AvailabilityCalendar eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AvailabilityCalendar&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AvailabilityCalendar.wrn</code></p><pre data-language="wrn"><code>component AvailabilityCalendar &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/avatar-group.wrn b/app/pages/components/avatar-group.wrn
new file mode 100644
index 00000000..7c7385af
--- /dev/null
+++ b/app/pages/components/avatar-group.wrn
@@ -0,0 +1,37 @@
+page AvatarGroupcomponent {
+  seo {
+    title = "AvatarGroup component"
+    description = "Reusable avatar group component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AvatarGroup</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>AvatarGroup</h1><p>Reusable avatar group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AvatarGroup label=&quot;Avatar&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AvatarGroup&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Avatar&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AvatarGroup.wrn</code></p><pre data-language="wrn"><code>component AvatarGroup &#123;
+  props &#123;
+    label = &quot;Avatar&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/avatar-upload.wrn b/app/pages/components/avatar-upload.wrn
new file mode 100644
index 00000000..d5030a9b
--- /dev/null
+++ b/app/pages/components/avatar-upload.wrn
@@ -0,0 +1,34 @@
+page AvatarUploadcomponent {
+  seo {
+    title = "AvatarUpload component"
+    description = "Reusable avatar upload component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AvatarUpload</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AvatarUpload</h1><p>Reusable avatar upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AvatarUpload eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AvatarUpload&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AvatarUpload.wrn</code></p><pre data-language="wrn"><code>component AvatarUpload &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/avatar.wrn b/app/pages/components/avatar.wrn
new file mode 100644
index 00000000..a8b479d5
--- /dev/null
+++ b/app/pages/components/avatar.wrn
@@ -0,0 +1,33 @@
+page Avatarcomponent {
+  seo {
+    title = "Avatar component"
+    description = "Reusable avatar component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Avatar</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>Avatar</h1><p>Reusable avatar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Avatar src=&quot;src&quot; alt=&quot;alt&quot; initials=&quot;WR&quot; size=&quot;md&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Avatar&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>src</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>initials</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;WR&quot;</code></td></tr><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Avatar.wrn</code></p><pre data-language="wrn"><code>component Avatar &#123;
+  props &#123;
+    class = &quot;&quot;
+    src = &quot;&quot;
+    alt = &quot;&quot;
+    initials = &quot;WR&quot;
+    size = &quot;md&quot;
+  &#125;
+  view &#123;
+    &lt;span class=&quot;inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500 font-semibold text-white &#123;size === 'sm' ? 'size-8 text-xs' : size === 'lg' ? 'size-14 text-base' : 'size-10 text-sm'&#125; &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;src&quot; src=&quot;&#123;src&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;h-full w-full object-cover&quot; /&gt;&lt;span data-show=&quot;!src&quot; aria-hidden=&quot;true&quot;&gt;&#123;initials&#125;&lt;/span&gt;&lt;/span&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/back-button.wrn b/app/pages/components/back-button.wrn
new file mode 100644
index 00000000..0ddd7027
--- /dev/null
+++ b/app/pages/components/back-button.wrn
@@ -0,0 +1,30 @@
+page BackButtoncomponent {
+  seo {
+    title = "BackButton component"
+    description = "Reusable back button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BackButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>BackButton</h1><p>Reusable back button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;BackButton label=&quot;Action&quot; type=&quot;button&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;BackButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BackButton.wrn</code></p><pre data-language="wrn"><code>component BackButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    type = &quot;button&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;button type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--ghost &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/back-to-top.wrn b/app/pages/components/back-to-top.wrn
new file mode 100644
index 00000000..c094b33a
--- /dev/null
+++ b/app/pages/components/back-to-top.wrn
@@ -0,0 +1,115 @@
+page BackToTopcomponent {
+  seo {
+    title = "BackToTop component"
+    description = "Reusable back to top component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BackToTop</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>BackToTop</h1><p>Reusable back to top component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>0 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;BackToTop label=&quot;Back to top&quot; assistiveLabel=&quot;Return to the top of the page&quot; threshold=&quot;500&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;BackToTop&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Back to top&quot;</code></td></tr><tr><td><code>assistiveLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Return to the top of the page&quot;</code></td></tr><tr><td><code>threshold</code></td><td><code>number</code></td><td>Optional</td><td><code>500</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BackToTop.wrn</code></p><pre data-language="wrn"><code>component BackToTop &#123;
+    props &#123;
+        class = &quot;&quot;
+        label = &quot;Back to top&quot;
+        assistiveLabel = &quot;Return to the top of the page&quot;
+        threshold = 500
+    &#125;
+
+    state visible = false
+
+    functions &#123;
+        function updateBackToTopVisibility() &#123;
+            visible = window.scrollY &gt; threshold
+        &#125;
+
+        function scrollToTop() &#123;
+            window.scrollTo(&#123;
+                top: 0,
+                behavior: &quot;smooth&quot;
+            &#125;)
+        &#125;
+    &#125;
+
+    lifecycle &#123;
+        mount &#123;
+            updateBackToTopVisibility()
+
+            window.addEventListener(
+            &quot;scroll&quot;,
+            updateBackToTopVisibility,
+            &#123; passive: true &#125;
+            )
+        &#125;
+
+        unmount &#123;
+            window.removeEventListener(
+            &quot;scroll&quot;,
+            updateBackToTopVisibility
+            )
+        &#125;
+    &#125;
+
+    watch visible &#123;
+        console.debug(
+        &quot;Back-to-top visibility:&quot;,
+        value,
+        previous
+        )
+    &#125;
+
+    view &#123;
+        &lt;div
+            class=&quot;group fixed bottom-6 right-5 z-[70] flex items-center gap-2 transition-all duration-300 sm:right-6 lg:bottom-8 lg:right-8 &#123;class&#125;&quot;
+            class:pointer-events-none=&quot;!visible&quot;
+            class:translate-y-5=&quot;!visible&quot;
+            class:scale-90=&quot;!visible&quot;
+            class:opacity-0=&quot;!visible&quot;
+            class:pointer-events-auto=&quot;visible&quot;
+            class:translate-y-0=&quot;visible&quot;
+            class:scale-100=&quot;visible&quot;
+            class:opacity-100=&quot;visible&quot;
+        &gt;
+            &lt;!-- Hover label --&gt;
+            &lt;span
+                class=&quot;pointer-events-none hidden translate-x-2 whitespace-nowrap rounded-xl border border-slate-200 bg-white/95 px-3 py-2 text-xs font-semibold text-slate-700 opacity-0 shadow-lg shadow-slate-950/10 backdrop-blur-xl transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100 dark:border-white/10 dark:bg-slate-900/95 dark:text-slate-200 dark:shadow-black/30 sm:block&quot;
+            &gt;
+                &#123;label&#125;
+            &lt;/span&gt;
+
+            &lt;!-- Gradient border wrapper --&gt;
+            &lt;div
+                class=&quot;relative rounded-2xl bg-linear-to-br from-indigo-500 via-violet-500 to-cyan-500 p-px shadow-xl shadow-indigo-600/20 transition duration-300 group-hover:-translate-y-1 group-hover:shadow-2xl group-hover:shadow-indigo-600/30&quot;
+            &gt;
+                &lt;!-- Glow --&gt;
+                &lt;div aria-hidden=&quot;true&quot; class=&quot;absolute inset-1 rounded-2xl bg-indigo-500/20 opacity-0 blur-xl transition-opacity duration-300 group-hover:opacity-100&quot; &gt;&lt;/div&gt;
+
+                &lt;button
+                    type=&quot;button&quot;
+                    @click=&quot;scrollToTop()&quot;
+                    aria-label=&quot;&#123;label&#125;&quot;
+                    title=&quot;&#123;label&#125;&quot;
+                    class=&quot;relative grid h-12 w-12 place-items-center rounded-[15px] bg-white/95 text-indigo-700 backdrop-blur-xl transition duration-300 hover:bg-indigo-600 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 active:scale-95 dark:bg-slate-900/95 dark:text-indigo-300 dark:hover:bg-indigo-500 dark:hover:text-white dark:focus-visible:ring-offset-slate-950 sm:h-13 sm:w-13&quot;
+                &gt;
+                    &lt;!-- Arrow --&gt;
+                    &lt;span class=&quot;icon-[lucide--arrow-up] h-5 w-5 transition-transform duration-300 group-hover:-translate-y-0.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                    &lt;span class=&quot;sr-only&quot;&gt;
+                        &#123;assistiveLabel&#125;
+                    &lt;/span&gt;
+                &lt;/button&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/badge.wrn b/app/pages/components/badge.wrn
new file mode 100644
index 00000000..fb940968
--- /dev/null
+++ b/app/pages/components/badge.wrn
@@ -0,0 +1,31 @@
+page Badgecomponent {
+  seo {
+    title = "Badge component"
+    description = "Reusable badge component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Badge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>Badge</h1><p>Reusable badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Badge label=&quot;Badge&quot; variant=&quot;neutral&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Badge&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Badge&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;neutral&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Badge.wrn</code></p><pre data-language="wrn"><code>component Badge &#123;
+  props &#123;
+    class = &quot;&quot;
+    label = &quot;Badge&quot;
+    variant = &quot;neutral&quot;
+  &#125;
+  view &#123;
+    &lt;span class=&quot;inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset &#123;variant === 'success' ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-950/40 dark:text-emerald-300' : variant === 'warning' ? 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-950/40 dark:text-amber-300' : variant === 'danger' ? 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-950/40 dark:text-red-300' : variant === 'brand' ? 'bg-violet-50 text-violet-700 ring-violet-600/20 dark:bg-violet-950/40 dark:text-violet-300' : 'bg-slate-100 text-slate-700 ring-slate-600/10 dark:bg-slate-800 dark:text-slate-300'&#125; &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;/span&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/bank-transfer-details.wrn b/app/pages/components/bank-transfer-details.wrn
new file mode 100644
index 00000000..e3f02aee
--- /dev/null
+++ b/app/pages/components/bank-transfer-details.wrn
@@ -0,0 +1,34 @@
+page BankTransferDetailscomponent {
+  seo {
+    title = "BankTransferDetails component"
+    description = "Reusable bank transfer details component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BankTransferDetails</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>BankTransferDetails</h1><p>Reusable bank transfer details component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;BankTransferDetails eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;BankTransferDetails&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BankTransferDetails.wrn</code></p><pre data-language="wrn"><code>component BankTransferDetails &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/banner.wrn b/app/pages/components/banner.wrn
new file mode 100644
index 00000000..abf29d80
--- /dev/null
+++ b/app/pages/components/banner.wrn
@@ -0,0 +1,33 @@
+page Bannercomponent {
+  seo {
+    title = "Banner component"
+    description = "Reusable banner component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Banner</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>Banner</h1><p>Reusable banner component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Banner text=&quot;Announcement&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; variant=&quot;brand&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Banner&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>text</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Announcement&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;brand&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Banner.wrn</code></p><pre data-language="wrn"><code>component Banner &#123;
+  props &#123;
+    class = &quot;&quot;
+    text = &quot;Announcement&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    variant = &quot;brand&quot;
+  &#125;
+  view &#123;
+    &lt;aside class=&quot;px-4 py-3 text-center text-sm font-medium &#123;variant === 'warning' ? 'bg-amber-400 text-amber-950' : 'bg-violet-600 text-white'&#125; &#123;class&#125;&quot;&gt;&lt;span&gt;&#123;text&#125;&lt;/span&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;ml-2 underline underline-offset-4&quot;&gt;&#123;actionLabel&#125; →&lt;/a&gt;&lt;/aside&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/bar-chart.wrn b/app/pages/components/bar-chart.wrn
new file mode 100644
index 00000000..903b88bd
--- /dev/null
+++ b/app/pages/components/bar-chart.wrn
@@ -0,0 +1,32 @@
+page BarChartcomponent {
+  seo {
+    title = "BarChart component"
+    description = "Reusable bar chart component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BarChart</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>BarChart</h1><p>Reusable bar chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;BarChart title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;BarChart&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BarChart.wrn</code></p><pre data-language="wrn"><code>component BarChart &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/beta-badge.wrn b/app/pages/components/beta-badge.wrn
new file mode 100644
index 00000000..3aac7745
--- /dev/null
+++ b/app/pages/components/beta-badge.wrn
@@ -0,0 +1,29 @@
+page BetaBadgecomponent {
+  seo {
+    title = "BetaBadge component"
+    description = "Reusable beta badge component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BetaBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>BetaBadge</h1><p>Reusable beta badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;BetaBadge label=&quot;Beta&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;BetaBadge&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Beta&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BetaBadge.wrn</code></p><pre data-language="wrn"><code>component BetaBadge &#123;
+  props &#123;
+    label = &quot;Beta&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-badge wire-badge--&#123;variant&#125; wire-catalog-badge wire-catalog-badge--betabadge &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/billing-address-form.wrn b/app/pages/components/billing-address-form.wrn
new file mode 100644
index 00000000..4920529b
--- /dev/null
+++ b/app/pages/components/billing-address-form.wrn
@@ -0,0 +1,34 @@
+page BillingAddressFormcomponent {
+  seo {
+    title = "BillingAddressForm component"
+    description = "Reusable billing address form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BillingAddressForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>BillingAddressForm</h1><p>Reusable billing address form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;BillingAddressForm eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;BillingAddressForm&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BillingAddressForm.wrn</code></p><pre data-language="wrn"><code>component BillingAddressForm &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/billing-example.wrn b/app/pages/components/billing-example.wrn
new file mode 100644
index 00000000..10768e72
--- /dev/null
+++ b/app/pages/components/billing-example.wrn
@@ -0,0 +1,34 @@
+page BillingExamplecomponent {
+  seo {
+    title = "BillingExample component"
+    description = "Reusable billing example component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BillingExample</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>BillingExample</h1><p>Reusable billing example component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;BillingExample eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;BillingExample&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BillingExample.wrn</code></p><pre data-language="wrn"><code>component BillingExample &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/billing-period-toggle.wrn b/app/pages/components/billing-period-toggle.wrn
new file mode 100644
index 00000000..0d31b561
--- /dev/null
+++ b/app/pages/components/billing-period-toggle.wrn
@@ -0,0 +1,37 @@
+page BillingPeriodTogglecomponent {
+  seo {
+    title = "BillingPeriodToggle component"
+    description = "Reusable billing period toggle component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BillingPeriodToggle</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>BillingPeriodToggle</h1><p>Reusable billing period toggle component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;BillingPeriodToggle label=&quot;BillingPeriod&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;BillingPeriodToggle&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;BillingPeriod&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BillingPeriodToggle.wrn</code></p><pre data-language="wrn"><code>component BillingPeriodToggle &#123;
+  props &#123;
+    label = &quot;BillingPeriod&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/blackout-date-picker.wrn b/app/pages/components/blackout-date-picker.wrn
new file mode 100644
index 00000000..899ae0b8
--- /dev/null
+++ b/app/pages/components/blackout-date-picker.wrn
@@ -0,0 +1,37 @@
+page BlackoutDatePickercomponent {
+  seo {
+    title = "BlackoutDatePicker component"
+    description = "Reusable blackout date picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BlackoutDatePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>BlackoutDatePicker</h1><p>Reusable blackout date picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;BlackoutDatePicker label=&quot;BlackoutDate&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;BlackoutDatePicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;BlackoutDate&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BlackoutDatePicker.wrn</code></p><pre data-language="wrn"><code>component BlackoutDatePicker &#123;
+  props &#123;
+    label = &quot;BlackoutDate&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/blog-card.wrn b/app/pages/components/blog-card.wrn
new file mode 100644
index 00000000..92f58056
--- /dev/null
+++ b/app/pages/components/blog-card.wrn
@@ -0,0 +1,34 @@
+page BlogCardcomponent {
+  seo {
+    title = "BlogCard component"
+    description = "Reusable blog card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BlogCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>BlogCard</h1><p>Reusable blog card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;BlogCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;BlogCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BlogCard.wrn</code></p><pre data-language="wrn"><code>component BlogCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/blog-grid.wrn b/app/pages/components/blog-grid.wrn
new file mode 100644
index 00000000..81a3de65
--- /dev/null
+++ b/app/pages/components/blog-grid.wrn
@@ -0,0 +1,31 @@
+page BlogGridcomponent {
+  seo {
+    title = "BlogGrid component"
+    description = "Reusable blog grid component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BlogGrid</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>BlogGrid</h1><p>Reusable blog grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;BlogGrid title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;BlogGrid&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BlogGrid.wrn</code></p><pre data-language="wrn"><code>component BlogGrid &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/blog-list.wrn b/app/pages/components/blog-list.wrn
new file mode 100644
index 00000000..dcdbfcb4
--- /dev/null
+++ b/app/pages/components/blog-list.wrn
@@ -0,0 +1,31 @@
+page BlogListcomponent {
+  seo {
+    title = "BlogList component"
+    description = "Reusable blog list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BlogList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>BlogList</h1><p>Reusable blog list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;BlogList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;BlogList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BlogList.wrn</code></p><pre data-language="wrn"><code>component BlogList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/blog-search.wrn b/app/pages/components/blog-search.wrn
new file mode 100644
index 00000000..4f446f89
--- /dev/null
+++ b/app/pages/components/blog-search.wrn
@@ -0,0 +1,34 @@
+page BlogSearchcomponent {
+  seo {
+    title = "BlogSearch component"
+    description = "Reusable blog search component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BlogSearch</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>BlogSearch</h1><p>Reusable blog search component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;BlogSearch eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;BlogSearch&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BlogSearch.wrn</code></p><pre data-language="wrn"><code>component BlogSearch &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/body-text.wrn b/app/pages/components/body-text.wrn
new file mode 100644
index 00000000..35ea5e7c
--- /dev/null
+++ b/app/pages/components/body-text.wrn
@@ -0,0 +1,29 @@
+page BodyTextcomponent {
+  seo {
+    title = "BodyText component"
+    description = "Reusable body text component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BodyText</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>BodyText</h1><p>Reusable body text component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;BodyText text=&quot;text&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;BodyText&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>text</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BodyText.wrn</code></p><pre data-language="wrn"><code>component BodyText &#123;
+  props &#123;
+    text = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-type wire-type--body wire-text--&#123;align&#125;  &#123;class&#125;&quot;&gt;&#123;text&#125;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/border-radius-picker.wrn b/app/pages/components/border-radius-picker.wrn
new file mode 100644
index 00000000..c780e4f5
--- /dev/null
+++ b/app/pages/components/border-radius-picker.wrn
@@ -0,0 +1,37 @@
+page BorderRadiusPickercomponent {
+  seo {
+    title = "BorderRadiusPicker component"
+    description = "Reusable border radius picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BorderRadiusPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>BorderRadiusPicker</h1><p>Reusable border radius picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;BorderRadiusPicker label=&quot;BorderRadius&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;BorderRadiusPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;BorderRadius&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BorderRadiusPicker.wrn</code></p><pre data-language="wrn"><code>component BorderRadiusPicker &#123;
+  props &#123;
+    label = &quot;BorderRadius&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/bottom-navigation.wrn b/app/pages/components/bottom-navigation.wrn
new file mode 100644
index 00000000..8e0e7060
--- /dev/null
+++ b/app/pages/components/bottom-navigation.wrn
@@ -0,0 +1,31 @@
+page BottomNavigationcomponent {
+  seo {
+    title = "BottomNavigation component"
+    description = "Reusable bottom navigation component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BottomNavigation</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>BottomNavigation</h1><p>Reusable bottom navigation component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;BottomNavigation eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;BottomNavigation&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BottomNavigation.wrn</code></p><pre data-language="wrn"><code>component BottomNavigation &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/brand-color-picker.wrn b/app/pages/components/brand-color-picker.wrn
new file mode 100644
index 00000000..e33b2031
--- /dev/null
+++ b/app/pages/components/brand-color-picker.wrn
@@ -0,0 +1,37 @@
+page BrandColorPickercomponent {
+  seo {
+    title = "BrandColorPicker component"
+    description = "Reusable brand color picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BrandColorPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>BrandColorPicker</h1><p>Reusable brand color picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;BrandColorPicker label=&quot;BrandColor&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;BrandColorPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;BrandColor&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BrandColorPicker.wrn</code></p><pre data-language="wrn"><code>component BrandColorPicker &#123;
+  props &#123;
+    label = &quot;BrandColor&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/brand-selector.wrn b/app/pages/components/brand-selector.wrn
new file mode 100644
index 00000000..f1aca55f
--- /dev/null
+++ b/app/pages/components/brand-selector.wrn
@@ -0,0 +1,37 @@
+page BrandSelectorcomponent {
+  seo {
+    title = "BrandSelector component"
+    description = "Reusable brand selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BrandSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>BrandSelector</h1><p>Reusable brand selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;BrandSelector label=&quot;Brand&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;BrandSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Brand&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BrandSelector.wrn</code></p><pre data-language="wrn"><code>component BrandSelector &#123;
+  props &#123;
+    label = &quot;Brand&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/breadcrumbs.wrn b/app/pages/components/breadcrumbs.wrn
new file mode 100644
index 00000000..fa35e9ca
--- /dev/null
+++ b/app/pages/components/breadcrumbs.wrn
@@ -0,0 +1,126 @@
+page Breadcrumbscomponent {
+  seo {
+    title = "Breadcrumbs component"
+    description = "Reusable breadcrumbs component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Breadcrumbs</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Breadcrumbs</h1><p>Reusable breadcrumbs component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>7 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Breadcrumbs items=&quot;[]&quot; centered=&quot;false&quot; compact=&quot;false&quot; showHome=&quot;true&quot; homeLabel=&quot;Home&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Breadcrumbs&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>centered</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>compact</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>showHome</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>homeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Home&quot;</code></td></tr><tr><td><code>homeHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;/&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Breadcrumbs.wrn</code></p><pre data-language="wrn"><code>component Breadcrumbs &#123;
+    props &#123;
+        class: string = &quot;&quot;
+        items = []
+        centered = false
+        compact = false
+        showHome = true
+        homeLabel = &quot;Home&quot;
+        homeHref = &quot;/&quot;
+    &#125;
+
+    view &#123;
+        &lt;nav
+            aria-label=&quot;Breadcrumb&quot;
+            class=&quot;w-full &#123;class&#125;&quot;
+            class:hidden=&quot;items.length === 0 &amp;&amp; !showHome&quot;
+        &gt;
+            &lt;ol
+                class=&quot;flex flex-wrap items-center text-slate-500 dark:text-slate-400&quot;
+                class:justify-center=&quot;centered&quot;
+                class:gap-1.5=&quot;compact&quot;
+                class:text-xs=&quot;compact&quot;
+                class:gap-2=&quot;!compact&quot;
+                class:text-sm=&quot;!compact&quot;
+            &gt;
+                &lt;!-- Home --&gt;
+                &lt;li
+                    class:hidden=&quot;!showHome&quot;
+                    class:inline-flex=&quot;showHome&quot;
+                &gt;
+                    &lt;a
+                        href=&quot;&#123;homeHref&#125;&quot;
+                        class=&quot;group inline-flex items-center gap-1.5 rounded-lg transition hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:hover:text-indigo-300&quot;
+                    &gt;
+                        &lt;span class=&quot;icon-[lucide--home] h-3.5 w-3.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                        &lt;span class:hidden=&quot;compact&quot;&gt;
+                            &#123;homeLabel&#125;
+                        &lt;/span&gt;
+
+                        &lt;span
+                            class=&quot;sr-only&quot;
+                            class:hidden=&quot;!compact&quot;
+                        &gt;
+                            &#123;homeLabel&#125;
+                        &lt;/span&gt;
+                    &lt;/a&gt;
+                &lt;/li&gt;
+
+                &lt;!-- Separator after home --&gt;
+                &lt;li
+                    aria-hidden=&quot;true&quot;
+                    class=&quot;text-slate-300 dark:text-slate-700&quot;
+                    class:hidden=&quot;!showHome || items.length === 0&quot;
+                    class:inline-flex=&quot;showHome &amp;&amp; items.length &gt; 0&quot;
+                &gt;
+                    &lt;span class=&quot;icon-[lucide--chevron-right] h-3.5 w-3.5&quot; &gt;&lt;/span&gt;
+                &lt;/li&gt;
+
+                &lt;!-- Dynamic breadcrumb items --&gt;
+                &#123;#each items as item, index&#125;
+                &lt;li class=&quot;inline-flex min-w-0 items-center gap-2&quot;&gt;
+                    &lt;!-- Linked item --&gt;
+                    &lt;a
+                        href=&quot;&#123;item.href&#125;&quot;
+                        class=&quot;max-w-48 truncate rounded-lg transition hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:hover:text-indigo-300 sm:max-w-64&quot;
+                        class:hidden=&quot;item.current || item.href === ''&quot;
+                        class:inline-flex=&quot;!item.current &amp;&amp; item.href !== ''&quot;
+                    &gt;
+                        &#123;item.label&#125;
+                    &lt;/a&gt;
+
+                    &lt;!-- Current item --&gt;
+                    &lt;span
+                        aria-current=&quot;page&quot;
+                        class=&quot;max-w-48 truncate font-semibold text-slate-950 dark:text-white sm:max-w-64&quot;
+                        class:hidden=&quot;!item.current&quot;
+                        class:inline-flex=&quot;item.current&quot;
+                    &gt;
+                        &#123;item.label&#125;
+                    &lt;/span&gt;
+
+                    &lt;!-- Plain unlinked item --&gt;
+                    &lt;span
+                        class=&quot;max-w-48 truncate text-slate-600 dark:text-slate-300 sm:max-w-64&quot;
+                        class:hidden=&quot;item.current || item.href !== ''&quot;
+                        class:inline-flex=&quot;!item.current &amp;&amp; item.href === ''&quot;
+                    &gt;
+                        &#123;item.label&#125;
+                    &lt;/span&gt;
+
+                    &lt;!-- Separator --&gt;
+                    &lt;span
+                        aria-hidden=&quot;true&quot;
+                        class=&quot;inline-flex text-slate-300 dark:text-slate-700&quot;
+                        class:hidden=&quot;index === items.length - 1&quot;
+                    &gt;
+                        &lt;span class=&quot;icon-[lucide--chevron-right] h-3.5 w-3.5&quot; &gt;&lt;/span&gt;
+                    &lt;/span&gt;
+                &lt;/li&gt;
+                &#123;/each&#125;
+            &lt;/ol&gt;
+        &lt;/nav&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/browser-frame.wrn b/app/pages/components/browser-frame.wrn
new file mode 100644
index 00000000..7b7a8388
--- /dev/null
+++ b/app/pages/components/browser-frame.wrn
@@ -0,0 +1,31 @@
+page BrowserFramecomponent {
+  seo {
+    title = "BrowserFrame component"
+    description = "Reusable browser frame component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BrowserFrame</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>BrowserFrame</h1><p>Reusable browser frame component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;BrowserFrame eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;BrowserFrame&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BrowserFrame.wrn</code></p><pre data-language="wrn"><code>component BrowserFrame &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/budget-range-slider.wrn b/app/pages/components/budget-range-slider.wrn
new file mode 100644
index 00000000..6a5e8914
--- /dev/null
+++ b/app/pages/components/budget-range-slider.wrn
@@ -0,0 +1,34 @@
+page BudgetRangeSlidercomponent {
+  seo {
+    title = "BudgetRangeSlider component"
+    description = "Reusable budget range slider component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BudgetRangeSlider</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>BudgetRangeSlider</h1><p>Reusable budget range slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;BudgetRangeSlider eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;BudgetRangeSlider&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BudgetRangeSlider.wrn</code></p><pre data-language="wrn"><code>component BudgetRangeSlider &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/budget-selector.wrn b/app/pages/components/budget-selector.wrn
new file mode 100644
index 00000000..aeff4c46
--- /dev/null
+++ b/app/pages/components/budget-selector.wrn
@@ -0,0 +1,37 @@
+page BudgetSelectorcomponent {
+  seo {
+    title = "BudgetSelector component"
+    description = "Reusable budget selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BudgetSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>BudgetSelector</h1><p>Reusable budget selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;BudgetSelector label=&quot;Budget&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;BudgetSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Budget&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BudgetSelector.wrn</code></p><pre data-language="wrn"><code>component BudgetSelector &#123;
+  props &#123;
+    label = &quot;Budget&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/business-hours-picker.wrn b/app/pages/components/business-hours-picker.wrn
new file mode 100644
index 00000000..c744910c
--- /dev/null
+++ b/app/pages/components/business-hours-picker.wrn
@@ -0,0 +1,37 @@
+page BusinessHoursPickercomponent {
+  seo {
+    title = "BusinessHoursPicker component"
+    description = "Reusable business hours picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">BusinessHoursPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>BusinessHoursPicker</h1><p>Reusable business hours picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;BusinessHoursPicker label=&quot;BusinessHours&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;BusinessHoursPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;BusinessHours&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BusinessHoursPicker.wrn</code></p><pre data-language="wrn"><code>component BusinessHoursPicker &#123;
+  props &#123;
+    label = &quot;BusinessHours&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/button-group.wrn b/app/pages/components/button-group.wrn
new file mode 100644
index 00000000..c827a5f5
--- /dev/null
+++ b/app/pages/components/button-group.wrn
@@ -0,0 +1,37 @@
+page ButtonGroupcomponent {
+  seo {
+    title = "ButtonGroup component"
+    description = "Reusable button group component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ButtonGroup</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ButtonGroup</h1><p>Reusable button group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ButtonGroup label=&quot;Button&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ButtonGroup&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Button&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ButtonGroup.wrn</code></p><pre data-language="wrn"><code>component ButtonGroup &#123;
+  props &#123;
+    label = &quot;Button&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/button-selector.wrn b/app/pages/components/button-selector.wrn
new file mode 100644
index 00000000..ed98464b
--- /dev/null
+++ b/app/pages/components/button-selector.wrn
@@ -0,0 +1,37 @@
+page ButtonSelectorcomponent {
+  seo {
+    title = "ButtonSelector component"
+    description = "Reusable button selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ButtonSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ButtonSelector</h1><p>Reusable button selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ButtonSelector label=&quot;Button&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ButtonSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Button&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ButtonSelector.wrn</code></p><pre data-language="wrn"><code>component ButtonSelector &#123;
+  props &#123;
+    label = &quot;Button&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/button.wrn b/app/pages/components/button.wrn
new file mode 100644
index 00000000..3cc57579
--- /dev/null
+++ b/app/pages/components/button.wrn
@@ -0,0 +1,39 @@
+page Buttoncomponent {
+  seo {
+    title = "Button component"
+    description = "Reusable button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Button</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>Button</h1><p>Reusable button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Button label=&quot;Button&quot; type=&quot;button&quot; variant=&quot;primary&quot; size=&quot;md&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Button&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Button&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>className</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Button.wrn</code></p><pre data-language="wrn"><code>component Button &#123;
+  props &#123;
+    label = &quot;Button&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    size = &quot;md&quot;
+    disabled = false
+    loading = false
+    icon = &quot;&quot;
+    className = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;button type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled || loading&#125;&quot; aria-busy=&quot;&#123;loading&#125;&quot; class=&quot;inline-flex min-h-11 items-center justify-center gap-2 rounded-xl font-semibold transition-all duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] &#123;size === 'sm' ? 'px-3 py-2 text-sm' : size === 'lg' ? 'px-6 py-3.5 text-base' : 'px-4 py-2.5 text-sm'&#125; &#123;variant === 'secondary' ? 'border border-slate-300 bg-white text-slate-900 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-white dark:hover:bg-slate-800' : variant === 'ghost' ? 'text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800' : variant === 'danger' ? 'bg-red-600 text-white hover:bg-red-700' : 'bg-violet-600 text-white shadow-sm hover:-translate-y-0.5 hover:bg-violet-700 hover:shadow-md'&#125; &#123;className&#125;&quot;&gt;
+      &lt;span data-show=&quot;loading&quot; class=&quot;size-4 animate-spin rounded-full border-2 border-current border-r-transparent&quot;&gt;&lt;/span&gt;
+      &lt;span&gt;&#123;label&#125;&lt;/span&gt;
+    &lt;/button&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/calendar-grid.wrn b/app/pages/components/calendar-grid.wrn
new file mode 100644
index 00000000..8fd55c96
--- /dev/null
+++ b/app/pages/components/calendar-grid.wrn
@@ -0,0 +1,31 @@
+page CalendarGridcomponent {
+  seo {
+    title = "CalendarGrid component"
+    description = "Reusable calendar grid component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CalendarGrid</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>CalendarGrid</h1><p>Reusable calendar grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CalendarGrid title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CalendarGrid&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CalendarGrid.wrn</code></p><pre data-language="wrn"><code>component CalendarGrid &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/calendar-header.wrn b/app/pages/components/calendar-header.wrn
new file mode 100644
index 00000000..e005c37b
--- /dev/null
+++ b/app/pages/components/calendar-header.wrn
@@ -0,0 +1,31 @@
+page CalendarHeadercomponent {
+  seo {
+    title = "CalendarHeader component"
+    description = "Reusable calendar header component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CalendarHeader</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>CalendarHeader</h1><p>Reusable calendar header component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CalendarHeader eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CalendarHeader&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CalendarHeader.wrn</code></p><pre data-language="wrn"><code>component CalendarHeader &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/calendar-navigation.wrn b/app/pages/components/calendar-navigation.wrn
new file mode 100644
index 00000000..50f8105a
--- /dev/null
+++ b/app/pages/components/calendar-navigation.wrn
@@ -0,0 +1,31 @@
+page CalendarNavigationcomponent {
+  seo {
+    title = "CalendarNavigation component"
+    description = "Reusable calendar navigation component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CalendarNavigation</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>CalendarNavigation</h1><p>Reusable calendar navigation component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CalendarNavigation eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CalendarNavigation&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CalendarNavigation.wrn</code></p><pre data-language="wrn"><code>component CalendarNavigation &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/calendar.wrn b/app/pages/components/calendar.wrn
new file mode 100644
index 00000000..17e6e617
--- /dev/null
+++ b/app/pages/components/calendar.wrn
@@ -0,0 +1,34 @@
+page Calendarcomponent {
+  seo {
+    title = "Calendar component"
+    description = "Reusable calendar component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Calendar</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>Calendar</h1><p>Reusable calendar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Calendar eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Calendar&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Calendar.wrn</code></p><pre data-language="wrn"><code>component Calendar &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/callback-url-input.wrn b/app/pages/components/callback-url-input.wrn
new file mode 100644
index 00000000..eea6479f
--- /dev/null
+++ b/app/pages/components/callback-url-input.wrn
@@ -0,0 +1,37 @@
+page CallbackUrlInputcomponent {
+  seo {
+    title = "CallbackUrlInput component"
+    description = "Reusable callback url input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CallbackUrlInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CallbackUrlInput</h1><p>Reusable callback url input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CallbackUrlInput label=&quot;CallbackUrl&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CallbackUrlInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;CallbackUrl&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CallbackUrlInput.wrn</code></p><pre data-language="wrn"><code>component CallbackUrlInput &#123;
+  props &#123;
+    label = &quot;CallbackUrl&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/campaign-card.wrn b/app/pages/components/campaign-card.wrn
new file mode 100644
index 00000000..0fb2c3a9
--- /dev/null
+++ b/app/pages/components/campaign-card.wrn
@@ -0,0 +1,30 @@
+page CampaignCardcomponent {
+  seo {
+    title = "CampaignCard component"
+    description = "Reusable campaign card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CampaignCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>CampaignCard</h1><p>Reusable campaign card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CampaignCard title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CampaignCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CampaignCard.wrn</code></p><pre data-language="wrn"><code>component CampaignCard &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card wire-catalog-card--campaign &#123;class&#125;&quot;&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-catalog-card__link&quot;&gt;&lt;span class=&quot;wire-visually-hidden&quot;&gt;Open &#123;title&#125;&lt;/span&gt;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/campaign-performance-preview.wrn b/app/pages/components/campaign-performance-preview.wrn
new file mode 100644
index 00000000..1edc36bb
--- /dev/null
+++ b/app/pages/components/campaign-performance-preview.wrn
@@ -0,0 +1,34 @@
+page CampaignPerformancePreviewcomponent {
+  seo {
+    title = "CampaignPerformancePreview component"
+    description = "Reusable campaign performance preview component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CampaignPerformancePreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>CampaignPerformancePreview</h1><p>Reusable campaign performance preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CampaignPerformancePreview eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CampaignPerformancePreview&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CampaignPerformancePreview.wrn</code></p><pre data-language="wrn"><code>component CampaignPerformancePreview &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/campaign-progress.wrn b/app/pages/components/campaign-progress.wrn
new file mode 100644
index 00000000..fdf0c2da
--- /dev/null
+++ b/app/pages/components/campaign-progress.wrn
@@ -0,0 +1,32 @@
+page CampaignProgresscomponent {
+  seo {
+    title = "CampaignProgress component"
+    description = "Reusable campaign progress component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CampaignProgress</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>CampaignProgress</h1><p>Reusable campaign progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CampaignProgress title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CampaignProgress&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CampaignProgress.wrn</code></p><pre data-language="wrn"><code>component CampaignProgress &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/capability-grid.wrn b/app/pages/components/capability-grid.wrn
new file mode 100644
index 00000000..831b879a
--- /dev/null
+++ b/app/pages/components/capability-grid.wrn
@@ -0,0 +1,31 @@
+page CapabilityGridcomponent {
+  seo {
+    title = "CapabilityGrid component"
+    description = "Reusable capability grid component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CapabilityGrid</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>CapabilityGrid</h1><p>Reusable capability grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CapabilityGrid title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CapabilityGrid&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CapabilityGrid.wrn</code></p><pre data-language="wrn"><code>component CapabilityGrid &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/captcha-field.wrn b/app/pages/components/captcha-field.wrn
new file mode 100644
index 00000000..a8e4f039
--- /dev/null
+++ b/app/pages/components/captcha-field.wrn
@@ -0,0 +1,37 @@
+page CaptchaFieldcomponent {
+  seo {
+    title = "CaptchaField component"
+    description = "Reusable captcha field component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CaptchaField</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CaptchaField</h1><p>Reusable captcha field component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CaptchaField label=&quot;Captcha&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CaptchaField&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Captcha&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CaptchaField.wrn</code></p><pre data-language="wrn"><code>component CaptchaField &#123;
+  props &#123;
+    label = &quot;Captcha&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/card-payment-form.wrn b/app/pages/components/card-payment-form.wrn
new file mode 100644
index 00000000..ed2f29b4
--- /dev/null
+++ b/app/pages/components/card-payment-form.wrn
@@ -0,0 +1,34 @@
+page CardPaymentFormcomponent {
+  seo {
+    title = "CardPaymentForm component"
+    description = "Reusable card payment form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CardPaymentForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>CardPaymentForm</h1><p>Reusable card payment form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CardPaymentForm eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CardPaymentForm&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CardPaymentForm.wrn</code></p><pre data-language="wrn"><code>component CardPaymentForm &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/card-selector.wrn b/app/pages/components/card-selector.wrn
new file mode 100644
index 00000000..855b6092
--- /dev/null
+++ b/app/pages/components/card-selector.wrn
@@ -0,0 +1,37 @@
+page CardSelectorcomponent {
+  seo {
+    title = "CardSelector component"
+    description = "Reusable card selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CardSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CardSelector</h1><p>Reusable card selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CardSelector label=&quot;Card&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CardSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Card&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CardSelector.wrn</code></p><pre data-language="wrn"><code>component CardSelector &#123;
+  props &#123;
+    label = &quot;Card&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/card-skeleton.wrn b/app/pages/components/card-skeleton.wrn
new file mode 100644
index 00000000..e26d02a7
--- /dev/null
+++ b/app/pages/components/card-skeleton.wrn
@@ -0,0 +1,32 @@
+page CardSkeletoncomponent {
+  seo {
+    title = "CardSkeleton component"
+    description = "Reusable card skeleton component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CardSkeleton</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>CardSkeleton</h1><p>Reusable card skeleton component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CardSkeleton label=&quot;Card&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CardSkeleton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Card&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CardSkeleton.wrn</code></p><pre data-language="wrn"><code>component CardSkeleton &#123;
+  props &#123;
+    label = &quot;Card&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/card.wrn b/app/pages/components/card.wrn
new file mode 100644
index 00000000..6b9cb823
--- /dev/null
+++ b/app/pages/components/card.wrn
@@ -0,0 +1,32 @@
+page Cardcomponent {
+  seo {
+    title = "Card component"
+    description = "Reusable card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Card</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>Card</h1><p>Reusable card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Card variant=&quot;default&quot; padding=&quot;md&quot; interactive=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Card&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>padding</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&quot;</code></td></tr><tr><td><code>interactive</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>className</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Card.wrn</code></p><pre data-language="wrn"><code>component Card &#123;
+  props &#123;
+    variant = &quot;default&quot;
+    padding = &quot;md&quot;
+    interactive = false
+    className = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;article class=&quot;rounded-2xl border border-slate-200 bg-white text-slate-950 shadow-sm transition duration-300 dark:border-slate-800 dark:bg-slate-900 dark:text-white &#123;padding === 'sm' ? 'p-4' : padding === 'lg' ? 'p-8' : 'p-6'&#125; &#123;variant === 'glass' ? 'bg-white/75 backdrop-blur-xl dark:bg-slate-900/70' : variant === 'elevated' ? 'shadow-xl shadow-slate-950/5' : ''&#125; &#123;interactive ? 'hover:-translate-y-1 hover:shadow-xl' : ''&#125; &#123;className&#125;&quot;&gt;&lt;slot /&gt;&lt;/article&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/career-application-form.wrn b/app/pages/components/career-application-form.wrn
new file mode 100644
index 00000000..2ac373d3
--- /dev/null
+++ b/app/pages/components/career-application-form.wrn
@@ -0,0 +1,34 @@
+page CareerApplicationFormcomponent {
+  seo {
+    title = "CareerApplicationForm component"
+    description = "Reusable career application form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CareerApplicationForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>CareerApplicationForm</h1><p>Reusable career application form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CareerApplicationForm eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CareerApplicationForm&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CareerApplicationForm.wrn</code></p><pre data-language="wrn"><code>component CareerApplicationForm &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/career-benefits-grid.wrn b/app/pages/components/career-benefits-grid.wrn
new file mode 100644
index 00000000..47e3bc42
--- /dev/null
+++ b/app/pages/components/career-benefits-grid.wrn
@@ -0,0 +1,31 @@
+page CareerBenefitsGridcomponent {
+  seo {
+    title = "CareerBenefitsGrid component"
+    description = "Reusable career benefits grid component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CareerBenefitsGrid</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>CareerBenefitsGrid</h1><p>Reusable career benefits grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CareerBenefitsGrid title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CareerBenefitsGrid&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CareerBenefitsGrid.wrn</code></p><pre data-language="wrn"><code>component CareerBenefitsGrid &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/carousel.wrn b/app/pages/components/carousel.wrn
new file mode 100644
index 00000000..588ba9e6
--- /dev/null
+++ b/app/pages/components/carousel.wrn
@@ -0,0 +1,34 @@
+page Carouselcomponent {
+  seo {
+    title = "Carousel component"
+    description = "Reusable carousel component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Carousel</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>Carousel</h1><p>Reusable carousel component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Carousel eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Carousel&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Carousel.wrn</code></p><pre data-language="wrn"><code>component Carousel &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/case-study-card.wrn b/app/pages/components/case-study-card.wrn
new file mode 100644
index 00000000..9706ad4c
--- /dev/null
+++ b/app/pages/components/case-study-card.wrn
@@ -0,0 +1,34 @@
+page CaseStudyCardcomponent {
+  seo {
+    title = "CaseStudyCard component"
+    description = "Reusable case study card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CaseStudyCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>CaseStudyCard</h1><p>Reusable case study card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CaseStudyCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CaseStudyCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CaseStudyCard.wrn</code></p><pre data-language="wrn"><code>component CaseStudyCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/case-study-hero.wrn b/app/pages/components/case-study-hero.wrn
new file mode 100644
index 00000000..b1aaff6c
--- /dev/null
+++ b/app/pages/components/case-study-hero.wrn
@@ -0,0 +1,31 @@
+page CaseStudyHerocomponent {
+  seo {
+    title = "CaseStudyHero component"
+    description = "Reusable case study hero component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CaseStudyHero</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>CaseStudyHero</h1><p>Reusable case study hero component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CaseStudyHero eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CaseStudyHero&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CaseStudyHero.wrn</code></p><pre data-language="wrn"><code>component CaseStudyHero &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/case-study-preview.wrn b/app/pages/components/case-study-preview.wrn
new file mode 100644
index 00000000..e418b62f
--- /dev/null
+++ b/app/pages/components/case-study-preview.wrn
@@ -0,0 +1,34 @@
+page CaseStudyPreviewcomponent {
+  seo {
+    title = "CaseStudyPreview component"
+    description = "Reusable case study preview component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CaseStudyPreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>CaseStudyPreview</h1><p>Reusable case study preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CaseStudyPreview eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CaseStudyPreview&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CaseStudyPreview.wrn</code></p><pre data-language="wrn"><code>component CaseStudyPreview &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/centered-cta.wrn b/app/pages/components/centered-cta.wrn
new file mode 100644
index 00000000..3c782b7c
--- /dev/null
+++ b/app/pages/components/centered-cta.wrn
@@ -0,0 +1,32 @@
+page CenteredCTAcomponent {
+  seo {
+    title = "CenteredCTA component"
+    description = "Reusable centered c t a component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CenteredCTA</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>CenteredCTA</h1><p>Reusable centered c t a component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CenteredCTA label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CenteredCTA&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CenteredCTA.wrn</code></p><pre data-language="wrn"><code>component CenteredCTA &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/centered-hero.wrn b/app/pages/components/centered-hero.wrn
new file mode 100644
index 00000000..953e756d
--- /dev/null
+++ b/app/pages/components/centered-hero.wrn
@@ -0,0 +1,31 @@
+page CenteredHerocomponent {
+  seo {
+    title = "CenteredHero component"
+    description = "Reusable centered hero component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CenteredHero</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>CenteredHero</h1><p>Reusable centered hero component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CenteredHero eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CenteredHero&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CenteredHero.wrn</code></p><pre data-language="wrn"><code>component CenteredHero &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/centered-section-header.wrn b/app/pages/components/centered-section-header.wrn
new file mode 100644
index 00000000..66961208
--- /dev/null
+++ b/app/pages/components/centered-section-header.wrn
@@ -0,0 +1,31 @@
+page CenteredSectionHeadercomponent {
+  seo {
+    title = "CenteredSectionHeader component"
+    description = "Reusable centered section header component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CenteredSectionHeader</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>CenteredSectionHeader</h1><p>Reusable centered section header component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CenteredSectionHeader eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CenteredSectionHeader&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CenteredSectionHeader.wrn</code></p><pre data-language="wrn"><code>component CenteredSectionHeader &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/certificate-upload.wrn b/app/pages/components/certificate-upload.wrn
new file mode 100644
index 00000000..59417654
--- /dev/null
+++ b/app/pages/components/certificate-upload.wrn
@@ -0,0 +1,34 @@
+page CertificateUploadcomponent {
+  seo {
+    title = "CertificateUpload component"
+    description = "Reusable certificate upload component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CertificateUpload</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>CertificateUpload</h1><p>Reusable certificate upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CertificateUpload eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CertificateUpload&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CertificateUpload.wrn</code></p><pre data-language="wrn"><code>component CertificateUpload &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/certification-badge.wrn b/app/pages/components/certification-badge.wrn
new file mode 100644
index 00000000..51549b9b
--- /dev/null
+++ b/app/pages/components/certification-badge.wrn
@@ -0,0 +1,32 @@
+page CertificationBadgecomponent {
+  seo {
+    title = "CertificationBadge component"
+    description = "Reusable certification badge component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CertificationBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>CertificationBadge</h1><p>Reusable certification badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CertificationBadge label=&quot;Certification&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CertificationBadge&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Certification&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CertificationBadge.wrn</code></p><pre data-language="wrn"><code>component CertificationBadge &#123;
+  props &#123;
+    label = &quot;Certification&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/challenge-section.wrn b/app/pages/components/challenge-section.wrn
new file mode 100644
index 00000000..0e5ba4f7
--- /dev/null
+++ b/app/pages/components/challenge-section.wrn
@@ -0,0 +1,31 @@
+page ChallengeSectioncomponent {
+  seo {
+    title = "ChallengeSection component"
+    description = "Reusable challenge section component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ChallengeSection</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ChallengeSection</h1><p>Reusable challenge section component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ChallengeSection eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ChallengeSection&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ChallengeSection.wrn</code></p><pre data-language="wrn"><code>component ChallengeSection &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/channel-badge.wrn b/app/pages/components/channel-badge.wrn
new file mode 100644
index 00000000..f8a880c4
--- /dev/null
+++ b/app/pages/components/channel-badge.wrn
@@ -0,0 +1,32 @@
+page ChannelBadgecomponent {
+  seo {
+    title = "ChannelBadge component"
+    description = "Reusable channel badge component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ChannelBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>ChannelBadge</h1><p>Reusable channel badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ChannelBadge label=&quot;Channel&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ChannelBadge&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Channel&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ChannelBadge.wrn</code></p><pre data-language="wrn"><code>component ChannelBadge &#123;
+  props &#123;
+    label = &quot;Channel&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/channel-card.wrn b/app/pages/components/channel-card.wrn
new file mode 100644
index 00000000..a5461290
--- /dev/null
+++ b/app/pages/components/channel-card.wrn
@@ -0,0 +1,30 @@
+page ChannelCardcomponent {
+  seo {
+    title = "ChannelCard component"
+    description = "Reusable channel card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ChannelCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ChannelCard</h1><p>Reusable channel card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ChannelCard title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ChannelCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ChannelCard.wrn</code></p><pre data-language="wrn"><code>component ChannelCard &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card wire-catalog-card--channel &#123;class&#125;&quot;&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-catalog-card__link&quot;&gt;&lt;span class=&quot;wire-visually-hidden&quot;&gt;Open &#123;title&#125;&lt;/span&gt;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/channel-comparison-chart.wrn b/app/pages/components/channel-comparison-chart.wrn
new file mode 100644
index 00000000..d9721567
--- /dev/null
+++ b/app/pages/components/channel-comparison-chart.wrn
@@ -0,0 +1,32 @@
+page ChannelComparisonChartcomponent {
+  seo {
+    title = "ChannelComparisonChart component"
+    description = "Reusable channel comparison chart component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ChannelComparisonChart</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>ChannelComparisonChart</h1><p>Reusable channel comparison chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ChannelComparisonChart title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ChannelComparisonChart&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ChannelComparisonChart.wrn</code></p><pre data-language="wrn"><code>component ChannelComparisonChart &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/channel-comparison-table.wrn b/app/pages/components/channel-comparison-table.wrn
new file mode 100644
index 00000000..4894e00a
--- /dev/null
+++ b/app/pages/components/channel-comparison-table.wrn
@@ -0,0 +1,31 @@
+page ChannelComparisonTablecomponent {
+  seo {
+    title = "ChannelComparisonTable component"
+    description = "Reusable channel comparison table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ChannelComparisonTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ChannelComparisonTable</h1><p>Reusable channel comparison table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ChannelComparisonTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ChannelComparisonTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ChannelComparisonTable.wrn</code></p><pre data-language="wrn"><code>component ChannelComparisonTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/channel-fallback-diagram.wrn b/app/pages/components/channel-fallback-diagram.wrn
new file mode 100644
index 00000000..ba88ba64
--- /dev/null
+++ b/app/pages/components/channel-fallback-diagram.wrn
@@ -0,0 +1,32 @@
+page ChannelFallbackDiagramcomponent {
+  seo {
+    title = "ChannelFallbackDiagram component"
+    description = "Reusable channel fallback diagram component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ChannelFallbackDiagram</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>ChannelFallbackDiagram</h1><p>Reusable channel fallback diagram component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ChannelFallbackDiagram title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ChannelFallbackDiagram&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ChannelFallbackDiagram.wrn</code></p><pre data-language="wrn"><code>component ChannelFallbackDiagram &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/channel-flow.wrn b/app/pages/components/channel-flow.wrn
new file mode 100644
index 00000000..403c5e0a
--- /dev/null
+++ b/app/pages/components/channel-flow.wrn
@@ -0,0 +1,32 @@
+page ChannelFlowcomponent {
+  seo {
+    title = "ChannelFlow component"
+    description = "Reusable channel flow component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ChannelFlow</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>ChannelFlow</h1><p>Reusable channel flow component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ChannelFlow title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ChannelFlow&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ChannelFlow.wrn</code></p><pre data-language="wrn"><code>component ChannelFlow &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/channel-icon.wrn b/app/pages/components/channel-icon.wrn
new file mode 100644
index 00000000..2a208267
--- /dev/null
+++ b/app/pages/components/channel-icon.wrn
@@ -0,0 +1,34 @@
+page ChannelIconcomponent {
+  seo {
+    title = "ChannelIcon component"
+    description = "Reusable channel icon component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ChannelIcon</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ChannelIcon</h1><p>Reusable channel icon component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ChannelIcon eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ChannelIcon&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ChannelIcon.wrn</code></p><pre data-language="wrn"><code>component ChannelIcon &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/channel-rate-table.wrn b/app/pages/components/channel-rate-table.wrn
new file mode 100644
index 00000000..6a9bfdf2
--- /dev/null
+++ b/app/pages/components/channel-rate-table.wrn
@@ -0,0 +1,31 @@
+page ChannelRateTablecomponent {
+  seo {
+    title = "ChannelRateTable component"
+    description = "Reusable channel rate table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ChannelRateTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ChannelRateTable</h1><p>Reusable channel rate table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ChannelRateTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ChannelRateTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ChannelRateTable.wrn</code></p><pre data-language="wrn"><code>component ChannelRateTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/channel-selector.wrn b/app/pages/components/channel-selector.wrn
new file mode 100644
index 00000000..a42d06d3
--- /dev/null
+++ b/app/pages/components/channel-selector.wrn
@@ -0,0 +1,37 @@
+page ChannelSelectorcomponent {
+  seo {
+    title = "ChannelSelector component"
+    description = "Reusable channel selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ChannelSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ChannelSelector</h1><p>Reusable channel selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ChannelSelector label=&quot;Channel&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ChannelSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Channel&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ChannelSelector.wrn</code></p><pre data-language="wrn"><code>component ChannelSelector &#123;
+  props &#123;
+    label = &quot;Channel&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/character-counter.wrn b/app/pages/components/character-counter.wrn
new file mode 100644
index 00000000..34455ad4
--- /dev/null
+++ b/app/pages/components/character-counter.wrn
@@ -0,0 +1,32 @@
+page CharacterCountercomponent {
+  seo {
+    title = "CharacterCounter component"
+    description = "Reusable character counter component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CharacterCounter</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>CharacterCounter</h1><p>Reusable character counter component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CharacterCounter label=&quot;Character&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CharacterCounter&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Character&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CharacterCounter.wrn</code></p><pre data-language="wrn"><code>component CharacterCounter &#123;
+  props &#123;
+    label = &quot;Character&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/chart-empty-state.wrn b/app/pages/components/chart-empty-state.wrn
new file mode 100644
index 00000000..ce648e09
--- /dev/null
+++ b/app/pages/components/chart-empty-state.wrn
@@ -0,0 +1,32 @@
+page ChartEmptyStatecomponent {
+  seo {
+    title = "ChartEmptyState component"
+    description = "Reusable chart empty state component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ChartEmptyState</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>ChartEmptyState</h1><p>Reusable chart empty state component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ChartEmptyState label=&quot;ChartEmpty&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ChartEmptyState&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;ChartEmpty&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ChartEmptyState.wrn</code></p><pre data-language="wrn"><code>component ChartEmptyState &#123;
+  props &#123;
+    label = &quot;ChartEmpty&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/chart-tooltip.wrn b/app/pages/components/chart-tooltip.wrn
new file mode 100644
index 00000000..1106b5d5
--- /dev/null
+++ b/app/pages/components/chart-tooltip.wrn
@@ -0,0 +1,34 @@
+page ChartTooltipcomponent {
+  seo {
+    title = "ChartTooltip component"
+    description = "Reusable chart tooltip component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ChartTooltip</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ChartTooltip</h1><p>Reusable chart tooltip component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ChartTooltip eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ChartTooltip&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ChartTooltip.wrn</code></p><pre data-language="wrn"><code>component ChartTooltip &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/checkbox-group.wrn b/app/pages/components/checkbox-group.wrn
new file mode 100644
index 00000000..4bb5f8c2
--- /dev/null
+++ b/app/pages/components/checkbox-group.wrn
@@ -0,0 +1,37 @@
+page CheckboxGroupcomponent {
+  seo {
+    title = "CheckboxGroup component"
+    description = "Reusable checkbox group component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CheckboxGroup</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CheckboxGroup</h1><p>Reusable checkbox group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CheckboxGroup label=&quot;Checkbox&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CheckboxGroup&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Checkbox&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CheckboxGroup.wrn</code></p><pre data-language="wrn"><code>component CheckboxGroup &#123;
+  props &#123;
+    label = &quot;Checkbox&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/checkbox.wrn b/app/pages/components/checkbox.wrn
new file mode 100644
index 00000000..28f21e31
--- /dev/null
+++ b/app/pages/components/checkbox.wrn
@@ -0,0 +1,35 @@
+page Checkboxcomponent {
+  seo {
+    title = "Checkbox component"
+    description = "Reusable checkbox component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Checkbox</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Checkbox</h1><p>Reusable checkbox component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>7 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Checkbox id=&quot;id&quot; name=&quot;name&quot; label=&quot;Checkbox&quot; description=&quot;description&quot; checked=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Checkbox&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Checkbox&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>checked</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Checkbox.wrn</code></p><pre data-language="wrn"><code>component Checkbox &#123;
+  props &#123;
+    class = &quot;&quot;
+    id = &quot;&quot;
+    name = &quot;&quot;
+    label = &quot;Checkbox&quot;
+    description = &quot;&quot;
+    checked = false
+    disabled = false
+  &#125;
+  view &#123;
+    &lt;label for=&quot;&#123;id&#125;&quot; class=&quot;flex min-h-11 cursor-pointer items-start gap-3 rounded-xl p-2 transition hover:bg-slate-50 dark:hover:bg-slate-900 &#123;class&#125;&quot;&gt;&lt;input id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; type=&quot;checkbox&quot; checked=&quot;&#123;checked&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;mt-0.5 size-5 rounded border-slate-300 text-violet-600 focus:ring-violet-500 dark:border-slate-700 dark:bg-slate-950&quot; /&gt;&lt;span&gt;&lt;span class=&quot;block text-sm font-semibold text-slate-900 dark:text-white&quot;&gt;&#123;label&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;mt-0.5 block text-sm text-slate-500 dark:text-slate-400&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/span&gt;&lt;/label&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/checklist-progress.wrn b/app/pages/components/checklist-progress.wrn
new file mode 100644
index 00000000..814765f9
--- /dev/null
+++ b/app/pages/components/checklist-progress.wrn
@@ -0,0 +1,32 @@
+page ChecklistProgresscomponent {
+  seo {
+    title = "ChecklistProgress component"
+    description = "Reusable checklist progress component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ChecklistProgress</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>ChecklistProgress</h1><p>Reusable checklist progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ChecklistProgress title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ChecklistProgress&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ChecklistProgress.wrn</code></p><pre data-language="wrn"><code>component ChecklistProgress &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/checklist.wrn b/app/pages/components/checklist.wrn
new file mode 100644
index 00000000..8588639b
--- /dev/null
+++ b/app/pages/components/checklist.wrn
@@ -0,0 +1,34 @@
+page Checklistcomponent {
+  seo {
+    title = "Checklist component"
+    description = "Reusable checklist component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Checklist</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>Checklist</h1><p>Reusable checklist component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Checklist eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Checklist&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Checklist.wrn</code></p><pre data-language="wrn"><code>component Checklist &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/chip-input.wrn b/app/pages/components/chip-input.wrn
new file mode 100644
index 00000000..17c9ca84
--- /dev/null
+++ b/app/pages/components/chip-input.wrn
@@ -0,0 +1,37 @@
+page ChipInputcomponent {
+  seo {
+    title = "ChipInput component"
+    description = "Reusable chip input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ChipInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ChipInput</h1><p>Reusable chip input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ChipInput label=&quot;Chip&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ChipInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Chip&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ChipInput.wrn</code></p><pre data-language="wrn"><code>component ChipInput &#123;
+  props &#123;
+    label = &quot;Chip&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/chip.wrn b/app/pages/components/chip.wrn
new file mode 100644
index 00000000..2083dc2f
--- /dev/null
+++ b/app/pages/components/chip.wrn
@@ -0,0 +1,29 @@
+page Chipcomponent {
+  seo {
+    title = "Chip component"
+    description = "Reusable chip component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Chip</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Chip</h1><p>Reusable chip component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Chip label=&quot;Chip&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Chip&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Chip&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Chip.wrn</code></p><pre data-language="wrn"><code>component Chip &#123;
+  props &#123;
+    label = &quot;Chip&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-badge wire-badge--&#123;variant&#125; wire-catalog-badge wire-catalog-badge--chip &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/circular-progress.wrn b/app/pages/components/circular-progress.wrn
new file mode 100644
index 00000000..ee487d56
--- /dev/null
+++ b/app/pages/components/circular-progress.wrn
@@ -0,0 +1,32 @@
+page CircularProgresscomponent {
+  seo {
+    title = "CircularProgress component"
+    description = "Reusable circular progress component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CircularProgress</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>CircularProgress</h1><p>Reusable circular progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CircularProgress title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CircularProgress&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CircularProgress.wrn</code></p><pre data-language="wrn"><code>component CircularProgress &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/city-selector.wrn b/app/pages/components/city-selector.wrn
new file mode 100644
index 00000000..5918cc3c
--- /dev/null
+++ b/app/pages/components/city-selector.wrn
@@ -0,0 +1,37 @@
+page CitySelectorcomponent {
+  seo {
+    title = "CitySelector component"
+    description = "Reusable city selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CitySelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CitySelector</h1><p>Reusable city selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CitySelector label=&quot;City&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CitySelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;City&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CitySelector.wrn</code></p><pre data-language="wrn"><code>component CitySelector &#123;
+  props &#123;
+    label = &quot;City&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/clear-filters-button.wrn b/app/pages/components/clear-filters-button.wrn
new file mode 100644
index 00000000..35251ed0
--- /dev/null
+++ b/app/pages/components/clear-filters-button.wrn
@@ -0,0 +1,32 @@
+page ClearFiltersButtoncomponent {
+  seo {
+    title = "ClearFiltersButton component"
+    description = "Reusable clear filters button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ClearFiltersButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>ClearFiltersButton</h1><p>Reusable clear filters button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ClearFiltersButton label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ClearFiltersButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ClearFiltersButton.wrn</code></p><pre data-language="wrn"><code>component ClearFiltersButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/clickable-card.wrn b/app/pages/components/clickable-card.wrn
new file mode 100644
index 00000000..719cdd64
--- /dev/null
+++ b/app/pages/components/clickable-card.wrn
@@ -0,0 +1,30 @@
+page ClickableCardcomponent {
+  seo {
+    title = "ClickableCard component"
+    description = "Reusable clickable card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ClickableCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ClickableCard</h1><p>Reusable clickable card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ClickableCard title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ClickableCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ClickableCard.wrn</code></p><pre data-language="wrn"><code>component ClickableCard &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card wire-catalog-card--clickable &#123;class&#125;&quot;&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-catalog-card__link&quot;&gt;&lt;span class=&quot;wire-visually-hidden&quot;&gt;Open &#123;title&#125;&lt;/span&gt;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/close-button.wrn b/app/pages/components/close-button.wrn
new file mode 100644
index 00000000..fc8a0697
--- /dev/null
+++ b/app/pages/components/close-button.wrn
@@ -0,0 +1,30 @@
+page CloseButtoncomponent {
+  seo {
+    title = "CloseButton component"
+    description = "Reusable close button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CloseButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>CloseButton</h1><p>Reusable close button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CloseButton label=&quot;Action&quot; type=&quot;button&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CloseButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CloseButton.wrn</code></p><pre data-language="wrn"><code>component CloseButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    type = &quot;button&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;button type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--ghost &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/cluster.wrn b/app/pages/components/cluster.wrn
new file mode 100644
index 00000000..08fbcae0
--- /dev/null
+++ b/app/pages/components/cluster.wrn
@@ -0,0 +1,30 @@
+page Clustercomponent {
+  seo {
+    title = "Cluster component"
+    description = "Reusable cluster component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Cluster</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Cluster</h1><p>Reusable cluster component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>2 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Cluster gap=&quot;4&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Cluster&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;4&quot;</code></td></tr><tr><td><code>className</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Cluster.wrn</code></p><pre data-language="wrn"><code>component Cluster &#123;
+  props &#123;
+    gap = &quot;4&quot;
+    className = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;flex flex-wrap items-center gap-&#123;gap&#125; &#123;className&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/code-block.wrn b/app/pages/components/code-block.wrn
new file mode 100644
index 00000000..40a0ae03
--- /dev/null
+++ b/app/pages/components/code-block.wrn
@@ -0,0 +1,33 @@
+page CodeBlockcomponent {
+  seo {
+    title = "CodeBlock component"
+    description = "Reusable code block component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CodeBlock</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>CodeBlock</h1><p>Reusable code block component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>0 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CodeBlock language=&quot;text&quot; filename=&quot;filename&quot; code=&quot;code&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CodeBlock&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>language</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>filename</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>code</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CodeBlock.wrn</code></p><pre data-language="wrn"><code>component CodeBlock &#123;
+  props &#123;
+    class = &quot;&quot;
+    language = &quot;text&quot;
+    filename = &quot;&quot;
+    code = &quot;&quot;
+  &#125;
+  state copied = false
+  view &#123;
+    &lt;div class=&quot;overflow-hidden rounded-2xl border border-slate-800 bg-slate-950 text-slate-100 &#123;class&#125;&quot;&gt;&lt;div class=&quot;flex min-h-11 items-center justify-between border-b border-slate-800 px-4 text-xs text-slate-400&quot;&gt;&lt;span&gt;&#123;filename || language&#125;&lt;/span&gt;&lt;button type=&quot;button&quot; @click=&quot;navigator.clipboard.writeText(code); copied = true&quot; class=&quot;rounded-lg px-2 py-1 hover:bg-slate-800&quot;&gt;&#123;copied ? 'Copied' : 'Copy'&#125;&lt;/button&gt;&lt;/div&gt;&lt;pre class=&quot;overflow-x-auto p-4 text-sm leading-6&quot;&gt;&lt;code&gt;&#123;code&#125;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/code-copy-button.wrn b/app/pages/components/code-copy-button.wrn
new file mode 100644
index 00000000..33723587
--- /dev/null
+++ b/app/pages/components/code-copy-button.wrn
@@ -0,0 +1,32 @@
+page CodeCopyButtoncomponent {
+  seo {
+    title = "CodeCopyButton component"
+    description = "Reusable code copy button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CodeCopyButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>CodeCopyButton</h1><p>Reusable code copy button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CodeCopyButton label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CodeCopyButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CodeCopyButton.wrn</code></p><pre data-language="wrn"><code>component CodeCopyButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/code-header.wrn b/app/pages/components/code-header.wrn
new file mode 100644
index 00000000..78f23cf4
--- /dev/null
+++ b/app/pages/components/code-header.wrn
@@ -0,0 +1,31 @@
+page CodeHeadercomponent {
+  seo {
+    title = "CodeHeader component"
+    description = "Reusable code header component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CodeHeader</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>CodeHeader</h1><p>Reusable code header component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CodeHeader eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CodeHeader&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CodeHeader.wrn</code></p><pre data-language="wrn"><code>component CodeHeader &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/code-input.wrn b/app/pages/components/code-input.wrn
new file mode 100644
index 00000000..6b012cdd
--- /dev/null
+++ b/app/pages/components/code-input.wrn
@@ -0,0 +1,37 @@
+page CodeInputcomponent {
+  seo {
+    title = "CodeInput component"
+    description = "Reusable code input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CodeInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CodeInput</h1><p>Reusable code input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CodeInput label=&quot;Code&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CodeInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Code&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CodeInput.wrn</code></p><pre data-language="wrn"><code>component CodeInput &#123;
+  props &#123;
+    label = &quot;Code&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/code-language-badge.wrn b/app/pages/components/code-language-badge.wrn
new file mode 100644
index 00000000..af86c8e9
--- /dev/null
+++ b/app/pages/components/code-language-badge.wrn
@@ -0,0 +1,32 @@
+page CodeLanguageBadgecomponent {
+  seo {
+    title = "CodeLanguageBadge component"
+    description = "Reusable code language badge component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CodeLanguageBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>CodeLanguageBadge</h1><p>Reusable code language badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CodeLanguageBadge label=&quot;CodeLanguage&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CodeLanguageBadge&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;CodeLanguage&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CodeLanguageBadge.wrn</code></p><pre data-language="wrn"><code>component CodeLanguageBadge &#123;
+  props &#123;
+    label = &quot;CodeLanguage&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/code-tabs.wrn b/app/pages/components/code-tabs.wrn
new file mode 100644
index 00000000..29519d7c
--- /dev/null
+++ b/app/pages/components/code-tabs.wrn
@@ -0,0 +1,34 @@
+page CodeTabscomponent {
+  seo {
+    title = "CodeTabs component"
+    description = "Reusable code tabs component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CodeTabs</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>CodeTabs</h1><p>Reusable code tabs component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CodeTabs eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CodeTabs&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CodeTabs.wrn</code></p><pre data-language="wrn"><code>component CodeTabs &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/code-text.wrn b/app/pages/components/code-text.wrn
new file mode 100644
index 00000000..dddbf89f
--- /dev/null
+++ b/app/pages/components/code-text.wrn
@@ -0,0 +1,29 @@
+page CodeTextcomponent {
+  seo {
+    title = "CodeText component"
+    description = "Reusable code text component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CodeText</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>CodeText</h1><p>Reusable code text component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CodeText text=&quot;text&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CodeText&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>text</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CodeText.wrn</code></p><pre data-language="wrn"><code>component CodeText &#123;
+  props &#123;
+    text = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-type wire-type--body wire-text--&#123;align&#125;  &#123;class&#125;&quot;&gt;&#123;text&#125;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/code.wrn b/app/pages/components/code.wrn
new file mode 100644
index 00000000..df65aad1
--- /dev/null
+++ b/app/pages/components/code.wrn
@@ -0,0 +1,34 @@
+page Codecomponent {
+  seo {
+    title = "Code component"
+    description = "Reusable code component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Code</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>Code</h1><p>Reusable code component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Code eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Code&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Code.wrn</code></p><pre data-language="wrn"><code>component Code &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/cohort-chart.wrn b/app/pages/components/cohort-chart.wrn
new file mode 100644
index 00000000..403a7cfd
--- /dev/null
+++ b/app/pages/components/cohort-chart.wrn
@@ -0,0 +1,32 @@
+page CohortChartcomponent {
+  seo {
+    title = "CohortChart component"
+    description = "Reusable cohort chart component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CohortChart</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>CohortChart</h1><p>Reusable cohort chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CohortChart title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CohortChart&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CohortChart.wrn</code></p><pre data-language="wrn"><code>component CohortChart &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/color-grid.wrn b/app/pages/components/color-grid.wrn
new file mode 100644
index 00000000..f10f5b27
--- /dev/null
+++ b/app/pages/components/color-grid.wrn
@@ -0,0 +1,31 @@
+page ColorGridcomponent {
+  seo {
+    title = "ColorGrid component"
+    description = "Reusable color grid component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ColorGrid</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ColorGrid</h1><p>Reusable color grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ColorGrid title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ColorGrid&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ColorGrid.wrn</code></p><pre data-language="wrn"><code>component ColorGrid &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/color-hex-input.wrn b/app/pages/components/color-hex-input.wrn
new file mode 100644
index 00000000..754ebcaf
--- /dev/null
+++ b/app/pages/components/color-hex-input.wrn
@@ -0,0 +1,37 @@
+page ColorHexInputcomponent {
+  seo {
+    title = "ColorHexInput component"
+    description = "Reusable color hex input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ColorHexInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ColorHexInput</h1><p>Reusable color hex input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ColorHexInput label=&quot;ColorHex&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ColorHexInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;ColorHex&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ColorHexInput.wrn</code></p><pre data-language="wrn"><code>component ColorHexInput &#123;
+  props &#123;
+    label = &quot;ColorHex&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/color-picker.wrn b/app/pages/components/color-picker.wrn
new file mode 100644
index 00000000..b4ec508c
--- /dev/null
+++ b/app/pages/components/color-picker.wrn
@@ -0,0 +1,37 @@
+page ColorPickercomponent {
+  seo {
+    title = "ColorPicker component"
+    description = "Reusable color picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ColorPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ColorPicker</h1><p>Reusable color picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ColorPicker label=&quot;Color&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ColorPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Color&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ColorPicker.wrn</code></p><pre data-language="wrn"><code>component ColorPicker &#123;
+  props &#123;
+    label = &quot;Color&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/color-selector.wrn b/app/pages/components/color-selector.wrn
new file mode 100644
index 00000000..a81e8285
--- /dev/null
+++ b/app/pages/components/color-selector.wrn
@@ -0,0 +1,37 @@
+page ColorSelectorcomponent {
+  seo {
+    title = "ColorSelector component"
+    description = "Reusable color selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ColorSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ColorSelector</h1><p>Reusable color selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ColorSelector label=&quot;Color&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ColorSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Color&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ColorSelector.wrn</code></p><pre data-language="wrn"><code>component ColorSelector &#123;
+  props &#123;
+    label = &quot;Color&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/color-swatch.wrn b/app/pages/components/color-swatch.wrn
new file mode 100644
index 00000000..1fce21a7
--- /dev/null
+++ b/app/pages/components/color-swatch.wrn
@@ -0,0 +1,34 @@
+page ColorSwatchcomponent {
+  seo {
+    title = "ColorSwatch component"
+    description = "Reusable color swatch component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ColorSwatch</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ColorSwatch</h1><p>Reusable color swatch component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ColorSwatch eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ColorSwatch&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ColorSwatch.wrn</code></p><pre data-language="wrn"><code>component ColorSwatch &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/combobox.wrn b/app/pages/components/combobox.wrn
new file mode 100644
index 00000000..1040b3a3
--- /dev/null
+++ b/app/pages/components/combobox.wrn
@@ -0,0 +1,36 @@
+page Comboboxcomponent {
+  seo {
+    title = "Combobox component"
+    description = "Reusable combobox component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Combobox</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Combobox</h1><p>Reusable combobox component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Combobox id=&quot;combobox&quot; name=&quot;name&quot; label=&quot;Choose an option&quot; placeholder=&quot;Search options&quot; options=&quot;[]&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Combobox&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;combobox&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Choose an option&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Search options&quot;</code></td></tr><tr><td><code>options</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Combobox.wrn</code></p><pre data-language="wrn"><code>component Combobox &#123;
+  props &#123;
+    id = &quot;combobox&quot;
+    name = &quot;&quot;
+    label = &quot;Choose an option&quot;
+    placeholder = &quot;Search options&quot;
+    options = []
+    required = false
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;wire-field &#123;class&#125;&quot;&gt;&lt;label for=&quot;&#123;id&#125;&quot; class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;/label&gt;&lt;input id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; list=&quot;&#123;id&#125;-options&quot; placeholder=&quot;&#123;placeholder&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; role=&quot;combobox&quot; aria-autocomplete=&quot;list&quot; class=&quot;wire-input&quot; /&gt;&lt;datalist id=&quot;&#123;id&#125;-options&quot;&gt;&#123;#each options as option&#125;&lt;option value=&quot;&#123;option.value&#125;&quot;&gt;&#123;option.label&#125;&lt;/option&gt;&#123;/each&#125;&lt;/datalist&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/coming-soon-badge.wrn b/app/pages/components/coming-soon-badge.wrn
new file mode 100644
index 00000000..7dc1f347
--- /dev/null
+++ b/app/pages/components/coming-soon-badge.wrn
@@ -0,0 +1,29 @@
+page ComingSoonBadgecomponent {
+  seo {
+    title = "ComingSoonBadge component"
+    description = "Reusable coming soon badge component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ComingSoonBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>ComingSoonBadge</h1><p>Reusable coming soon badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ComingSoonBadge label=&quot;ComingSoon&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ComingSoonBadge&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;ComingSoon&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ComingSoonBadge.wrn</code></p><pre data-language="wrn"><code>component ComingSoonBadge &#123;
+  props &#123;
+    label = &quot;ComingSoon&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-badge wire-badge--&#123;variant&#125; wire-catalog-badge wire-catalog-badge--comingsoonbadge &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/coming-soon-state.wrn b/app/pages/components/coming-soon-state.wrn
new file mode 100644
index 00000000..cef483ef
--- /dev/null
+++ b/app/pages/components/coming-soon-state.wrn
@@ -0,0 +1,32 @@
+page ComingSoonStatecomponent {
+  seo {
+    title = "ComingSoonState component"
+    description = "Reusable coming soon state component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ComingSoonState</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>ComingSoonState</h1><p>Reusable coming soon state component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ComingSoonState label=&quot;ComingSoon&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ComingSoonState&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;ComingSoon&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ComingSoonState.wrn</code></p><pre data-language="wrn"><code>component ComingSoonState &#123;
+  props &#123;
+    label = &quot;ComingSoon&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/command-block.wrn b/app/pages/components/command-block.wrn
new file mode 100644
index 00000000..82106cbc
--- /dev/null
+++ b/app/pages/components/command-block.wrn
@@ -0,0 +1,34 @@
+page CommandBlockcomponent {
+  seo {
+    title = "CommandBlock component"
+    description = "Reusable command block component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CommandBlock</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>CommandBlock</h1><p>Reusable command block component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CommandBlock eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CommandBlock&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CommandBlock.wrn</code></p><pre data-language="wrn"><code>component CommandBlock &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/command-menu.wrn b/app/pages/components/command-menu.wrn
new file mode 100644
index 00000000..6be48d92
--- /dev/null
+++ b/app/pages/components/command-menu.wrn
@@ -0,0 +1,31 @@
+page CommandMenucomponent {
+  seo {
+    title = "CommandMenu component"
+    description = "Reusable command menu component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CommandMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>CommandMenu</h1><p>Reusable command menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CommandMenu title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CommandMenu&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CommandMenu.wrn</code></p><pre data-language="wrn"><code>component CommandMenu &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/command-search-input.wrn b/app/pages/components/command-search-input.wrn
new file mode 100644
index 00000000..b334b2b4
--- /dev/null
+++ b/app/pages/components/command-search-input.wrn
@@ -0,0 +1,37 @@
+page CommandSearchInputcomponent {
+  seo {
+    title = "CommandSearchInput component"
+    description = "Reusable command search input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CommandSearchInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CommandSearchInput</h1><p>Reusable command search input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CommandSearchInput label=&quot;CommandSearch&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CommandSearchInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;CommandSearch&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CommandSearchInput.wrn</code></p><pre data-language="wrn"><code>component CommandSearchInput &#123;
+  props &#123;
+    label = &quot;CommandSearch&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/company-hero.wrn b/app/pages/components/company-hero.wrn
new file mode 100644
index 00000000..f4e704bc
--- /dev/null
+++ b/app/pages/components/company-hero.wrn
@@ -0,0 +1,31 @@
+page CompanyHerocomponent {
+  seo {
+    title = "CompanyHero component"
+    description = "Reusable company hero component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CompanyHero</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>CompanyHero</h1><p>Reusable company hero component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CompanyHero eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CompanyHero&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CompanyHero.wrn</code></p><pre data-language="wrn"><code>component CompanyHero &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/company-name-input.wrn b/app/pages/components/company-name-input.wrn
new file mode 100644
index 00000000..598a61ea
--- /dev/null
+++ b/app/pages/components/company-name-input.wrn
@@ -0,0 +1,37 @@
+page CompanyNameInputcomponent {
+  seo {
+    title = "CompanyNameInput component"
+    description = "Reusable company name input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CompanyNameInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CompanyNameInput</h1><p>Reusable company name input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CompanyNameInput label=&quot;CompanyName&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CompanyNameInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;CompanyName&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CompanyNameInput.wrn</code></p><pre data-language="wrn"><code>component CompanyNameInput &#123;
+  props &#123;
+    label = &quot;CompanyName&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/company-page-shell.wrn b/app/pages/components/company-page-shell.wrn
new file mode 100644
index 00000000..45d27060
--- /dev/null
+++ b/app/pages/components/company-page-shell.wrn
@@ -0,0 +1,31 @@
+page CompanyPageShellcomponent {
+  seo {
+    title = "CompanyPageShell component"
+    description = "Reusable company page shell component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CompanyPageShell</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>CompanyPageShell</h1><p>Reusable company page shell component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CompanyPageShell eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CompanyPageShell&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CompanyPageShell.wrn</code></p><pre data-language="wrn"><code>component CompanyPageShell &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/company-size-selector.wrn b/app/pages/components/company-size-selector.wrn
new file mode 100644
index 00000000..68d24cb5
--- /dev/null
+++ b/app/pages/components/company-size-selector.wrn
@@ -0,0 +1,37 @@
+page CompanySizeSelectorcomponent {
+  seo {
+    title = "CompanySizeSelector component"
+    description = "Reusable company size selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CompanySizeSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CompanySizeSelector</h1><p>Reusable company size selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CompanySizeSelector label=&quot;CompanySize&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CompanySizeSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;CompanySize&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CompanySizeSelector.wrn</code></p><pre data-language="wrn"><code>component CompanySizeSelector &#123;
+  props &#123;
+    label = &quot;CompanySize&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/comparison-date-range-picker.wrn b/app/pages/components/comparison-date-range-picker.wrn
new file mode 100644
index 00000000..9c019f32
--- /dev/null
+++ b/app/pages/components/comparison-date-range-picker.wrn
@@ -0,0 +1,37 @@
+page ComparisonDateRangePickercomponent {
+  seo {
+    title = "ComparisonDateRangePicker component"
+    description = "Reusable comparison date range picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ComparisonDateRangePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ComparisonDateRangePicker</h1><p>Reusable comparison date range picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ComparisonDateRangePicker label=&quot;ComparisonDateRange&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ComparisonDateRangePicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;ComparisonDateRange&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ComparisonDateRangePicker.wrn</code></p><pre data-language="wrn"><code>component ComparisonDateRangePicker &#123;
+  props &#123;
+    label = &quot;ComparisonDateRange&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/comparison-table.wrn b/app/pages/components/comparison-table.wrn
new file mode 100644
index 00000000..d075c954
--- /dev/null
+++ b/app/pages/components/comparison-table.wrn
@@ -0,0 +1,31 @@
+page ComparisonTablecomponent {
+  seo {
+    title = "ComparisonTable component"
+    description = "Reusable comparison table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ComparisonTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ComparisonTable</h1><p>Reusable comparison table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ComparisonTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ComparisonTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ComparisonTable.wrn</code></p><pre data-language="wrn"><code>component ComparisonTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/completion-meter.wrn b/app/pages/components/completion-meter.wrn
new file mode 100644
index 00000000..102e4a73
--- /dev/null
+++ b/app/pages/components/completion-meter.wrn
@@ -0,0 +1,32 @@
+page CompletionMetercomponent {
+  seo {
+    title = "CompletionMeter component"
+    description = "Reusable completion meter component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CompletionMeter</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>CompletionMeter</h1><p>Reusable completion meter component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CompletionMeter title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CompletionMeter&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CompletionMeter.wrn</code></p><pre data-language="wrn"><code>component CompletionMeter &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/compliance-badge-list.wrn b/app/pages/components/compliance-badge-list.wrn
new file mode 100644
index 00000000..4e58617e
--- /dev/null
+++ b/app/pages/components/compliance-badge-list.wrn
@@ -0,0 +1,31 @@
+page ComplianceBadgeListcomponent {
+  seo {
+    title = "ComplianceBadgeList component"
+    description = "Reusable compliance badge list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ComplianceBadgeList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ComplianceBadgeList</h1><p>Reusable compliance badge list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ComplianceBadgeList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ComplianceBadgeList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ComplianceBadgeList.wrn</code></p><pre data-language="wrn"><code>component ComplianceBadgeList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/compliance-program-card.wrn b/app/pages/components/compliance-program-card.wrn
new file mode 100644
index 00000000..5b4025f0
--- /dev/null
+++ b/app/pages/components/compliance-program-card.wrn
@@ -0,0 +1,34 @@
+page ComplianceProgramCardcomponent {
+  seo {
+    title = "ComplianceProgramCard component"
+    description = "Reusable compliance program card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ComplianceProgramCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ComplianceProgramCard</h1><p>Reusable compliance program card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ComplianceProgramCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ComplianceProgramCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ComplianceProgramCard.wrn</code></p><pre data-language="wrn"><code>component ComplianceProgramCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/confirm-password-input.wrn b/app/pages/components/confirm-password-input.wrn
new file mode 100644
index 00000000..316b514a
--- /dev/null
+++ b/app/pages/components/confirm-password-input.wrn
@@ -0,0 +1,37 @@
+page ConfirmPasswordInputcomponent {
+  seo {
+    title = "ConfirmPasswordInput component"
+    description = "Reusable confirm password input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ConfirmPasswordInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ConfirmPasswordInput</h1><p>Reusable confirm password input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ConfirmPasswordInput label=&quot;ConfirmPassword&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ConfirmPasswordInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;ConfirmPassword&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ConfirmPasswordInput.wrn</code></p><pre data-language="wrn"><code>component ConfirmPasswordInput &#123;
+  props &#123;
+    label = &quot;ConfirmPassword&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/confirmation-dialog.wrn b/app/pages/components/confirmation-dialog.wrn
new file mode 100644
index 00000000..23245f61
--- /dev/null
+++ b/app/pages/components/confirmation-dialog.wrn
@@ -0,0 +1,36 @@
+page ConfirmationDialogcomponent {
+  seo {
+    title = "ConfirmationDialog component"
+    description = "Reusable confirmation dialog component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ConfirmationDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>ConfirmationDialog</h1><p>Reusable confirmation dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>7 props</span><span>1 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ConfirmationDialog title=&quot;Confirm action&quot; description=&quot;Are you sure you want to continue?&quot; confirmLabel=&quot;Confirm&quot; cancelLabel=&quot;Cancel&quot; danger=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ConfirmationDialog&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Confirm action&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Are you sure you want to continue?&quot;</code></td></tr><tr><td><code>confirmLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Confirm&quot;</code></td></tr><tr><td><code>cancelLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Cancel&quot;</code></td></tr><tr><td><code>danger</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>confirm</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ConfirmationDialog.wrn</code></p><pre data-language="wrn"><code>component ConfirmationDialog &#123;
+  props &#123;
+    title = &quot;Confirm action&quot;
+    description = &quot;Are you sure you want to continue?&quot;
+    confirmLabel = &quot;Confirm&quot;
+    cancelLabel = &quot;Cancel&quot;
+    danger = false
+    open = false
+    class = &quot;&quot;
+  &#125;
+  state visible = open
+  view &#123;
+    &lt;div data-show=&quot;visible&quot; class=&quot;wire-overlay &#123;class&#125;&quot; role=&quot;presentation&quot;&gt;&lt;section role=&quot;alertdialog&quot; aria-modal=&quot;true&quot; aria-labelledby=&quot;confirmation-title&quot; aria-describedby=&quot;confirmation-description&quot; class=&quot;wire-dialog&quot;&gt;&lt;h2 id=&quot;confirmation-title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p id=&quot;confirmation-description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;div class=&quot;wire-dialog__actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot; @click=&quot;visible = false&quot;&gt;&#123;cancelLabel&#125;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn &#123;danger ? 'wire-btn--danger' : 'wire-btn--primary'&#125;&quot;&gt;&lt;slot name=&quot;confirm&quot;&gt;&#123;confirmLabel&#125;&lt;/slot&gt;&lt;/button&gt;&lt;/div&gt;&lt;/section&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/connected-account-card.wrn b/app/pages/components/connected-account-card.wrn
new file mode 100644
index 00000000..3d366d89
--- /dev/null
+++ b/app/pages/components/connected-account-card.wrn
@@ -0,0 +1,34 @@
+page ConnectedAccountCardcomponent {
+  seo {
+    title = "ConnectedAccountCard component"
+    description = "Reusable connected account card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ConnectedAccountCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ConnectedAccountCard</h1><p>Reusable connected account card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ConnectedAccountCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ConnectedAccountCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ConnectedAccountCard.wrn</code></p><pre data-language="wrn"><code>component ConnectedAccountCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/connection-card.wrn b/app/pages/components/connection-card.wrn
new file mode 100644
index 00000000..fca443af
--- /dev/null
+++ b/app/pages/components/connection-card.wrn
@@ -0,0 +1,30 @@
+page ConnectionCardcomponent {
+  seo {
+    title = "ConnectionCard component"
+    description = "Reusable connection card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ConnectionCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ConnectionCard</h1><p>Reusable connection card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ConnectionCard title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ConnectionCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ConnectionCard.wrn</code></p><pre data-language="wrn"><code>component ConnectionCard &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card wire-catalog-card--connection &#123;class&#125;&quot;&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-catalog-card__link&quot;&gt;&lt;span class=&quot;wire-visually-hidden&quot;&gt;Open &#123;title&#125;&lt;/span&gt;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/consent-timeline-preview.wrn b/app/pages/components/consent-timeline-preview.wrn
new file mode 100644
index 00000000..a9ca19c6
--- /dev/null
+++ b/app/pages/components/consent-timeline-preview.wrn
@@ -0,0 +1,34 @@
+page ConsentTimelinePreviewcomponent {
+  seo {
+    title = "ConsentTimelinePreview component"
+    description = "Reusable consent timeline preview component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ConsentTimelinePreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ConsentTimelinePreview</h1><p>Reusable consent timeline preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ConsentTimelinePreview eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ConsentTimelinePreview&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ConsentTimelinePreview.wrn</code></p><pre data-language="wrn"><code>component ConsentTimelinePreview &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/contact-card.wrn b/app/pages/components/contact-card.wrn
new file mode 100644
index 00000000..4ea40416
--- /dev/null
+++ b/app/pages/components/contact-card.wrn
@@ -0,0 +1,30 @@
+page ContactCardcomponent {
+  seo {
+    title = "ContactCard component"
+    description = "Reusable contact card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ContactCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ContactCard</h1><p>Reusable contact card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ContactCard title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ContactCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ContactCard.wrn</code></p><pre data-language="wrn"><code>component ContactCard &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card wire-catalog-card--contact &#123;class&#125;&quot;&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-catalog-card__link&quot;&gt;&lt;span class=&quot;wire-visually-hidden&quot;&gt;Open &#123;title&#125;&lt;/span&gt;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/contact-cta.wrn b/app/pages/components/contact-cta.wrn
new file mode 100644
index 00000000..d9bae8d4
--- /dev/null
+++ b/app/pages/components/contact-cta.wrn
@@ -0,0 +1,32 @@
+page ContactCTAcomponent {
+  seo {
+    title = "ContactCTA component"
+    description = "Reusable contact c t a component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ContactCTA</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>ContactCTA</h1><p>Reusable contact c t a component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ContactCTA label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ContactCTA&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ContactCTA.wrn</code></p><pre data-language="wrn"><code>component ContactCTA &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/contact-form.wrn b/app/pages/components/contact-form.wrn
new file mode 100644
index 00000000..ed589308
--- /dev/null
+++ b/app/pages/components/contact-form.wrn
@@ -0,0 +1,34 @@
+page ContactFormcomponent {
+  seo {
+    title = "ContactForm component"
+    description = "Reusable contact form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ContactForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ContactForm</h1><p>Reusable contact form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ContactForm eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ContactForm&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ContactForm.wrn</code></p><pre data-language="wrn"><code>component ContactForm &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/contact-hero.wrn b/app/pages/components/contact-hero.wrn
new file mode 100644
index 00000000..a677b53d
--- /dev/null
+++ b/app/pages/components/contact-hero.wrn
@@ -0,0 +1,31 @@
+page ContactHerocomponent {
+  seo {
+    title = "ContactHero component"
+    description = "Reusable contact hero component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ContactHero</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ContactHero</h1><p>Reusable contact hero component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ContactHero eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ContactHero&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ContactHero.wrn</code></p><pre data-language="wrn"><code>component ContactHero &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/contact-page-shell.wrn b/app/pages/components/contact-page-shell.wrn
new file mode 100644
index 00000000..58ef64f5
--- /dev/null
+++ b/app/pages/components/contact-page-shell.wrn
@@ -0,0 +1,31 @@
+page ContactPageShellcomponent {
+  seo {
+    title = "ContactPageShell component"
+    description = "Reusable contact page shell component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ContactPageShell</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ContactPageShell</h1><p>Reusable contact page shell component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ContactPageShell eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ContactPageShell&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ContactPageShell.wrn</code></p><pre data-language="wrn"><code>component ContactPageShell &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/contact-sales-banner.wrn b/app/pages/components/contact-sales-banner.wrn
new file mode 100644
index 00000000..25ab0f74
--- /dev/null
+++ b/app/pages/components/contact-sales-banner.wrn
@@ -0,0 +1,216 @@
+page ContactSalesBannercomponent {
+  seo {
+    title = "ContactSalesBanner component"
+    description = "Reusable contact sales banner component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ContactSalesBanner</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>ContactSalesBanner</h1><p>Reusable contact sales banner component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ContactSalesBanner eyebrow=&quot;Enterprise identity&quot; title=&quot;Ready to secure your next application?&quot; description=&quot;description&quot; primaryLabel=&quot;Contact sales&quot; primaryHref=&quot;/contact&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ContactSalesBanner&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Enterprise identity&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Ready to secure your next application?&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>primaryLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Contact sales&quot;</code></td></tr><tr><td><code>primaryHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;/contact&quot;</code></td></tr><tr><td><code>secondaryLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Start free&quot;</code></td></tr><tr><td><code>secondaryHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;/sign-up&quot;</code></td></tr><tr><td><code>iconClass</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;icon-[lucide--messages-square]&quot;</code></td></tr><tr><td><code>centered</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>compact</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>points</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>trustPoints</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ContactSalesBanner.wrn</code></p><pre data-language="wrn"><code>component ContactSalesBanner &#123;
+    props &#123;
+        class: string = &quot;&quot;
+        eyebrow = &quot;Enterprise identity&quot;
+        title = &quot;Ready to secure your next application?&quot;
+        description = &quot;&quot;
+
+        primaryLabel = &quot;Contact sales&quot;
+        primaryHref = &quot;/contact&quot;
+
+        secondaryLabel = &quot;Start free&quot;
+        secondaryHref = &quot;/sign-up&quot;
+
+        iconClass = &quot;icon-[lucide--messages-square]&quot;
+
+        centered = false
+        compact = false
+
+        points = []
+        trustPoints = []
+    &#125;
+
+    view &#123;
+        &lt;section
+            aria-labelledby=&quot;contact-sales-banner-title&quot;
+            class=&quot;px-5 sm:px-8 lg:px-10 xl:px-12 &#123;class&#125;&quot;
+            class:py-10=&quot;compact&quot;
+            class:sm:py-12=&quot;compact&quot;
+            class:py-14=&quot;!compact&quot;
+            class:sm:py-16=&quot;!compact&quot;
+            class:lg:py-20=&quot;!compact&quot;
+        &gt;
+            &lt;div
+                class=&quot;relative mx-auto w-full max-w-7xl overflow-hidden rounded-3xl border border-indigo-200/80 bg-linear-to-br from-indigo-50 via-white to-violet-50 shadow-xl shadow-indigo-950/5 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10 dark:shadow-black/20&quot;
+            &gt;
+                &lt;!-- Background decoration --&gt;
+                &lt;div
+                    aria-hidden=&quot;true&quot;
+                    class=&quot;pointer-events-none absolute inset-0 overflow-hidden&quot;
+                &gt;
+                    &lt;div class=&quot;absolute -right-24 -top-24 h-64 w-64 rounded-full bg-indigo-300/20 blur-3xl dark:bg-indigo-500/10&quot;&gt;&lt;/div&gt;
+
+                    &lt;div class=&quot;absolute -bottom-28 -left-20 h-64 w-64 rounded-full bg-violet-300/20 blur-3xl dark:bg-violet-500/10&quot;&gt;&lt;/div&gt;
+
+                    &lt;div class=&quot;absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-indigo-400/50 to-transparent dark:via-indigo-400/20&quot;&gt;&lt;/div&gt;
+                &lt;/div&gt;
+
+                &lt;div
+                    class=&quot;relative&quot;
+                    class:px-6=&quot;compact&quot;
+                    class:py-7=&quot;compact&quot;
+                    class:sm:px-8=&quot;compact&quot;
+                    class:px-6=&quot;!compact&quot;
+                    class:py-8=&quot;!compact&quot;
+                    class:sm:px-9=&quot;!compact&quot;
+                    class:sm:py-10=&quot;!compact&quot;
+                    class:lg:px-12=&quot;!compact&quot;
+                    class:lg:py-12=&quot;!compact&quot;
+                &gt;
+                    &lt;!-- Main content --&gt;
+                    &lt;div
+                        class=&quot;gap-8&quot;
+                        class:flex=&quot;centered&quot;
+                        class:flex-col=&quot;centered&quot;
+                        class:items-center=&quot;centered&quot;
+                        class:text-center=&quot;centered&quot;
+                        class:mx-auto=&quot;centered&quot;
+                        class:max-w-4xl=&quot;centered&quot;
+                        class:grid=&quot;!centered&quot;
+                        class:lg:grid-cols-[minmax(0,1fr)_auto]=&quot;!centered&quot;
+                        class:lg:items-center=&quot;!centered&quot;
+                        class:lg:gap-12=&quot;!centered&quot;
+                    &gt;
+                        &lt;!-- Copy --&gt;
+                        &lt;div
+                            class=&quot;min-w-0&quot;
+                            class:max-w-3xl=&quot;centered&quot;
+                            class:max-w-4xl=&quot;!centered&quot;
+                        &gt;
+                            &lt;!-- Eyebrow --&gt;
+                            &lt;div
+                                class=&quot;flex&quot;
+                                class:hidden=&quot;eyebrow === ''&quot;
+                                class:justify-center=&quot;centered&quot;
+                                class:justify-start=&quot;!centered&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-white/80 px-3 py-1.5 text-xs font-semibold text-indigo-700 shadow-sm backdrop-blur-sm dark:border-indigo-500/20 dark:bg-white/5 dark:text-indigo-300&quot;
+                                &gt;
+                                    &lt;span class=&quot;&#123;iconClass&#125; h-3.5 w-3.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                    &#123;eyebrow&#125;
+                                &lt;/span&gt;
+                            &lt;/div&gt;
+
+                            &lt;!-- Title --&gt;
+                            &lt;h2
+                                id=&quot;contact-sales-banner-title&quot;
+                                class=&quot;font-bold tracking-tight text-slate-950 dark:text-white&quot;
+                                class:mt-5=&quot;eyebrow !== ''&quot;
+                                class:text-2xl=&quot;compact&quot;
+                                class:leading-tight=&quot;compact&quot;
+                                class:sm:text-3xl=&quot;compact&quot;
+                                class:text-3xl=&quot;!compact&quot;
+                                class:leading-tight=&quot;!compact&quot;
+                                class:sm:text-4xl=&quot;!compact&quot;
+                            &gt;
+                                &#123;title&#125;
+                            &lt;/h2&gt;
+
+                            &lt;!-- Description --&gt;
+                            &lt;p
+                                class=&quot;mt-4 text-sm leading-7 text-slate-600 dark:text-slate-400 sm:text-base&quot;
+                                class:hidden=&quot;description === ''&quot;
+                                class:mx-auto=&quot;centered&quot;
+                                class:max-w-2xl=&quot;centered&quot;
+                                class:max-w-3xl=&quot;!centered&quot;
+                            &gt;
+                                &#123;description&#125;
+                            &lt;/p&gt;
+
+                            &lt;!-- Dynamic points --&gt;
+                            &lt;div
+                                class=&quot;mt-6 flex flex-wrap gap-x-5 gap-y-3&quot;
+                                class:hidden=&quot;points.length === 0&quot;
+                                class:justify-center=&quot;centered&quot;
+                                class:justify-start=&quot;!centered&quot;
+                            &gt;
+                                &#123;#each points.slice(0, 4) as point&#125;
+                                &lt;div class=&quot;inline-flex items-center gap-2 text-sm font-medium text-slate-700 dark:text-slate-300&quot;&gt;
+                                    &lt;span
+                                        class=&quot;grid h-6 w-6 shrink-0 place-items-center rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300&quot;
+                                    &gt;
+                                        &lt;span class=&quot;icon-[lucide--check] h-3.5 w-3.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &#123;point&#125;
+                                &lt;/div&gt;
+                                &#123;/each&#125;
+                            &lt;/div&gt;
+                        &lt;/div&gt;
+
+                        &lt;!-- Actions --&gt;
+                        &lt;div
+                            class=&quot;flex shrink-0 flex-col gap-3 sm:flex-row&quot;
+                            class:hidden=&quot;primaryLabel === '' &amp;&amp; secondaryLabel === ''&quot;
+                            class:mt-1=&quot;centered&quot;
+                            class:justify-center=&quot;centered&quot;
+                        &gt;
+                            &lt;a
+                                href=&quot;&#123;secondaryHref&#125;&quot;
+                                class=&quot;h-12 items-center justify-center rounded-xl border border-slate-200 bg-white/90 px-5 text-sm font-semibold text-slate-700 shadow-sm backdrop-blur-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-white hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500/30 dark:hover:bg-white/10 dark:hover:text-indigo-300&quot;
+                                class:hidden=&quot;secondaryLabel === ''&quot;
+                                class:inline-flex=&quot;secondaryLabel !== ''&quot;
+                            &gt;
+                                &#123;secondaryLabel&#125;
+                            &lt;/a&gt;
+
+                            &lt;a
+                                href=&quot;&#123;primaryHref&#125;&quot;
+                                class=&quot;group h-12 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900&quot;
+                                class:hidden=&quot;primaryLabel === ''&quot;
+                                class:inline-flex=&quot;primaryLabel !== ''&quot;
+                            &gt;
+                                &#123;primaryLabel&#125;
+
+                                &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/a&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+
+                    &lt;!-- Dynamic trust strip --&gt;
+                    &lt;div
+                        class=&quot;mt-8 border-t border-indigo-200/70 pt-5 dark:border-indigo-500/15&quot;
+                        class:hidden=&quot;compact || trustPoints.length === 0&quot;
+                    &gt;
+                        &lt;div
+                            class=&quot;flex flex-wrap items-center gap-x-6 gap-y-3&quot;
+                            class:justify-center=&quot;centered&quot;
+                            class:justify-start=&quot;!centered&quot;
+                        &gt;
+                            &#123;#each trustPoints.slice(0, 4) as trustPoint&#125;
+                            &lt;span class=&quot;inline-flex items-center gap-2 text-xs font-medium text-slate-500 dark:text-slate-400&quot;&gt;
+                                &lt;span class=&quot;&#123;trustPoint.iconClass&#125; h-4 w-4 &#123;trustPoint.iconColorClass&#125;&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                &#123;trustPoint.label&#125;
+                            &lt;/span&gt;
+                            &#123;/each&#125;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/section&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/contact-sales-button.wrn b/app/pages/components/contact-sales-button.wrn
new file mode 100644
index 00000000..4ab5ed97
--- /dev/null
+++ b/app/pages/components/contact-sales-button.wrn
@@ -0,0 +1,32 @@
+page ContactSalesButtoncomponent {
+  seo {
+    title = "ContactSalesButton component"
+    description = "Reusable contact sales button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ContactSalesButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>ContactSalesButton</h1><p>Reusable contact sales button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ContactSalesButton label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ContactSalesButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ContactSalesButton.wrn</code></p><pre data-language="wrn"><code>component ContactSalesButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/contact-sales-form.wrn b/app/pages/components/contact-sales-form.wrn
new file mode 100644
index 00000000..426cba5e
--- /dev/null
+++ b/app/pages/components/contact-sales-form.wrn
@@ -0,0 +1,34 @@
+page ContactSalesFormcomponent {
+  seo {
+    title = "ContactSalesForm component"
+    description = "Reusable contact sales form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ContactSalesForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ContactSalesForm</h1><p>Reusable contact sales form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ContactSalesForm eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ContactSalesForm&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ContactSalesForm.wrn</code></p><pre data-language="wrn"><code>component ContactSalesForm &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/container.wrn b/app/pages/components/container.wrn
new file mode 100644
index 00000000..6a3f1b61
--- /dev/null
+++ b/app/pages/components/container.wrn
@@ -0,0 +1,30 @@
+page Containercomponent {
+  seo {
+    title = "Container component"
+    description = "Reusable container component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Container</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Container</h1><p>Reusable container component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>2 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Container size=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Container&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>className</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Container.wrn</code></p><pre data-language="wrn"><code>component Container &#123;
+  props &#123;
+    size = &quot;default&quot;
+    className = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;w-full &#123;size === 'narrow' ? 'max-w-3xl' : size === 'wide' ? 'max-w-screen-2xl' : 'max-w-7xl'&#125; &#123;className&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/context-menu.wrn b/app/pages/components/context-menu.wrn
new file mode 100644
index 00000000..0116e92f
--- /dev/null
+++ b/app/pages/components/context-menu.wrn
@@ -0,0 +1,31 @@
+page ContextMenucomponent {
+  seo {
+    title = "ContextMenu component"
+    description = "Reusable context menu component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ContextMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>ContextMenu</h1><p>Reusable context menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ContextMenu title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ContextMenu&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ContextMenu.wrn</code></p><pre data-language="wrn"><code>component ContextMenu &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/context-switcher.wrn b/app/pages/components/context-switcher.wrn
new file mode 100644
index 00000000..7ebf853f
--- /dev/null
+++ b/app/pages/components/context-switcher.wrn
@@ -0,0 +1,34 @@
+page ContextSwitchercomponent {
+  seo {
+    title = "ContextSwitcher component"
+    description = "Reusable context switcher component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ContextSwitcher</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ContextSwitcher</h1><p>Reusable context switcher component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ContextSwitcher eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ContextSwitcher&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ContextSwitcher.wrn</code></p><pre data-language="wrn"><code>component ContextSwitcher &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/conversation-list.wrn b/app/pages/components/conversation-list.wrn
new file mode 100644
index 00000000..026ae1fd
--- /dev/null
+++ b/app/pages/components/conversation-list.wrn
@@ -0,0 +1,31 @@
+page ConversationListcomponent {
+  seo {
+    title = "ConversationList component"
+    description = "Reusable conversation list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ConversationList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ConversationList</h1><p>Reusable conversation list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ConversationList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ConversationList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ConversationList.wrn</code></p><pre data-language="wrn"><code>component ConversationList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/conversation-preview.wrn b/app/pages/components/conversation-preview.wrn
new file mode 100644
index 00000000..1f5caffa
--- /dev/null
+++ b/app/pages/components/conversation-preview.wrn
@@ -0,0 +1,34 @@
+page ConversationPreviewcomponent {
+  seo {
+    title = "ConversationPreview component"
+    description = "Reusable conversation preview component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ConversationPreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ConversationPreview</h1><p>Reusable conversation preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ConversationPreview eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ConversationPreview&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ConversationPreview.wrn</code></p><pre data-language="wrn"><code>component ConversationPreview &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/conversion-chart.wrn b/app/pages/components/conversion-chart.wrn
new file mode 100644
index 00000000..decb98ac
--- /dev/null
+++ b/app/pages/components/conversion-chart.wrn
@@ -0,0 +1,32 @@
+page ConversionChartcomponent {
+  seo {
+    title = "ConversionChart component"
+    description = "Reusable conversion chart component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ConversionChart</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>ConversionChart</h1><p>Reusable conversion chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ConversionChart title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ConversionChart&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ConversionChart.wrn</code></p><pre data-language="wrn"><code>component ConversionChart &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/cookie-banner.wrn b/app/pages/components/cookie-banner.wrn
new file mode 100644
index 00000000..8fce23dd
--- /dev/null
+++ b/app/pages/components/cookie-banner.wrn
@@ -0,0 +1,33 @@
+page CookieBannercomponent {
+  seo {
+    title = "CookieBanner component"
+    description = "Reusable cookie banner component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CookieBanner</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>CookieBanner</h1><p>Reusable cookie banner component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>0 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CookieBanner title=&quot;We use cookies&quot; description=&quot;We use essential cookies and optional analytics to improve your experience.&quot; privacyHref=&quot;/privacy&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CookieBanner&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;We use cookies&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;We use essential cookies and optional analytics to improve your experience.&quot;</code></td></tr><tr><td><code>privacyHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;/privacy&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CookieBanner.wrn</code></p><pre data-language="wrn"><code>component CookieBanner &#123;
+  props &#123;
+    class = &quot;&quot;
+    title = &quot;We use cookies&quot;
+    description = &quot;We use essential cookies and optional analytics to improve your experience.&quot;
+    privacyHref = &quot;/privacy&quot;
+  &#125;
+  state visible = true
+  view &#123;
+    &lt;aside data-show=&quot;visible&quot; class=&quot;fixed inset-x-4 bottom-4 z-50 max-w-4xl rounded-3xl border border-slate-200 bg-white/95 p-5 shadow-2xl backdrop-blur-xl dark:border-slate-800 dark:bg-slate-900/95 &#123;class&#125;&quot; role=&quot;dialog&quot; aria-label=&quot;Cookie preferences&quot;&gt;&lt;div class=&quot;flex flex-col gap-5 md:flex-row md:items-center&quot;&gt;&lt;div class=&quot;min-w-0 flex-1&quot;&gt;&lt;h2 class=&quot;font-bold&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p class=&quot;mt-1 text-sm text-slate-500&quot;&gt;&#123;description&#125; &lt;a href=&quot;&#123;privacyHref&#125;&quot; class=&quot;text-violet-600 underline&quot;&gt;Privacy policy&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;&lt;button @click=&quot;visible = false&quot; class=&quot;min-h-11 rounded-xl border border-slate-300 px-4 text-sm font-semibold dark:border-slate-700&quot;&gt;Reject optional&lt;/button&gt;&lt;button @click=&quot;visible = false&quot; class=&quot;min-h-11 rounded-xl bg-violet-600 px-4 text-sm font-semibold text-white&quot;&gt;Accept all&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/aside&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/cookie-category-list.wrn b/app/pages/components/cookie-category-list.wrn
new file mode 100644
index 00000000..073584ac
--- /dev/null
+++ b/app/pages/components/cookie-category-list.wrn
@@ -0,0 +1,31 @@
+page CookieCategoryListcomponent {
+  seo {
+    title = "CookieCategoryList component"
+    description = "Reusable cookie category list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CookieCategoryList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>CookieCategoryList</h1><p>Reusable cookie category list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CookieCategoryList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CookieCategoryList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CookieCategoryList.wrn</code></p><pre data-language="wrn"><code>component CookieCategoryList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/cookie-category-toggle.wrn b/app/pages/components/cookie-category-toggle.wrn
new file mode 100644
index 00000000..6c55bddb
--- /dev/null
+++ b/app/pages/components/cookie-category-toggle.wrn
@@ -0,0 +1,37 @@
+page CookieCategoryTogglecomponent {
+  seo {
+    title = "CookieCategoryToggle component"
+    description = "Reusable cookie category toggle component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CookieCategoryToggle</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CookieCategoryToggle</h1><p>Reusable cookie category toggle component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CookieCategoryToggle label=&quot;CookieCategory&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CookieCategoryToggle&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;CookieCategory&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CookieCategoryToggle.wrn</code></p><pre data-language="wrn"><code>component CookieCategoryToggle &#123;
+  props &#123;
+    label = &quot;CookieCategory&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/cookie-consent.wrn b/app/pages/components/cookie-consent.wrn
new file mode 100644
index 00000000..aa8d7027
--- /dev/null
+++ b/app/pages/components/cookie-consent.wrn
@@ -0,0 +1,393 @@
+page CookieConsentcomponent {
+  seo {
+    title = "CookieConsent component"
+    description = "Reusable cookie consent component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CookieConsent</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>CookieConsent</h1><p>Reusable cookie consent component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>0 slots</span><span>2 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CookieConsent /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CookieConsent&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li><li><code>change</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CookieConsent.wrn</code></p><pre data-language="wrn"><code>component CookieConsent &#123;
+    props &#123;
+        class: string = &quot;&quot;
+    &#125;
+    state bannerOpen = false
+    state preferencesOpen = false
+
+    state analyticsCookies = false
+    state personalizationCookies = false
+    state marketingCookies = false
+
+    view &#123;
+        &lt;div class=&quot;&#123;class&#125;&quot; class:hidden=&quot;!bannerOpen&quot;&gt;
+            &lt;!-- Cookie consent banner --&gt;
+            &lt;section
+                role=&quot;dialog&quot;
+                aria-modal=&quot;false&quot;
+                aria-labelledby=&quot;cookie-consent-title&quot;
+                aria-describedby=&quot;cookie-consent-description&quot;
+                class=&quot;fixed inset-x-0 bottom-0 z-[80] p-4 sm:p-5 lg:p-6 &#123;class&#125;&quot;
+                class:hidden=&quot;!bannerOpen || preferencesOpen&quot;
+                class:block=&quot;bannerOpen &amp;&amp; !preferencesOpen&quot;
+            &gt;
+                &lt;div
+                    class=&quot;mx-auto w-full max-w-7xl overflow-hidden rounded-3xl border border-slate-200 bg-white/95 shadow-2xl shadow-slate-950/20 backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/95 dark:shadow-black/40&quot;
+                &gt;
+                    &lt;div class=&quot;grid items-center gap-6 p-5 sm:p-6 lg:grid-cols-[minmax(0,1fr)_auto] lg:p-7&quot;&gt;
+
+                        &lt;!-- Message --&gt;
+                        &lt;div class=&quot;flex items-start gap-4&quot;&gt;
+                            &lt;span
+                                class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-2xl bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300&quot;
+                            &gt;
+                                &lt;span class=&quot;icon-[lucide--cookie] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/span&gt;
+
+                            &lt;div class=&quot;min-w-0&quot;&gt;
+                                &lt;div class=&quot;flex flex-wrap items-center gap-2&quot;&gt;
+                                    &lt;h2
+                                        id=&quot;cookie-consent-title&quot;
+                                        class=&quot;text-base font-bold text-slate-950 dark:text-white&quot;
+                                    &gt;
+                                        Your privacy matters
+                                    &lt;/h2&gt;
+
+                                    &lt;span
+                                        class=&quot;inline-flex items-center rounded-full bg-emerald-100 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300&quot;
+                                    &gt;
+                                        Privacy first
+                                    &lt;/span&gt;
+                                &lt;/div&gt;
+
+                                &lt;p
+                                    id=&quot;cookie-consent-description&quot;
+                                    class=&quot;mt-2 max-w-3xl text-sm leading-6 text-slate-600 dark:text-slate-400&quot;
+                                &gt;
+                                    We use essential cookies to operate WRNexusJS. With your
+                                    permission, we also use analytics and personalization cookies
+                                    to improve your experience.
+                                &lt;/p&gt;
+
+                                &lt;div class=&quot;mt-3 flex flex-wrap items-center gap-x-4 gap-y-2&quot;&gt;
+                                    &lt;a
+                                        href=&quot;/cookies&quot;
+                                        class=&quot;inline-flex items-center gap-1.5 text-xs font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300&quot;
+                                    &gt;
+                                        Cookie policy
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/a&gt;
+
+                                    &lt;a
+                                        href=&quot;/privacy&quot;
+                                        class=&quot;inline-flex items-center gap-1.5 text-xs font-semibold text-slate-500 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300&quot;
+                                    &gt;
+                                        Privacy policy
+                                    &lt;/a&gt;
+                                &lt;/div&gt;
+                            &lt;/div&gt;
+                        &lt;/div&gt;
+
+                        &lt;!-- Actions --&gt;
+                        &lt;div class=&quot;grid gap-2 sm:grid-cols-3 lg:flex lg:items-center&quot;&gt;
+                            &lt;button
+                                type=&quot;button&quot;
+                                @click=&quot; analyticsCookies = false; personalizationCookies = false; marketingCookies = false; bannerOpen = false &quot;
+                                data-cookie-action=&quot;essential&quot;
+                                class=&quot;inline-flex h-11 items-center justify-center rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 transition hover:border-slate-300 hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-white/20 dark:hover:bg-white/10 dark:hover:text-white&quot;
+                            &gt;
+                                Essential only
+                            &lt;/button&gt;
+
+                            &lt;button
+                                type=&quot;button&quot;
+                                @click=&quot;preferencesOpen = true&quot;
+                                class=&quot;inline-flex h-11 items-center justify-center gap-2 rounded-xl border border-indigo-200 bg-indigo-50 px-4 text-sm font-semibold text-indigo-700 transition hover:border-indigo-300 hover:bg-indigo-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/15&quot;
+                            &gt;
+                                &lt;span class=&quot;icon-[lucide--settings-2] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                Preferences
+                            &lt;/button&gt;
+
+                            &lt;button
+                                type=&quot;button&quot;
+                                @click=&quot; analyticsCookies = true; personalizationCookies = true; marketingCookies = true; bannerOpen = false &quot;
+                                data-cookie-action=&quot;accept-all&quot;
+                                class=&quot;inline-flex h-11 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900&quot;
+                            &gt;
+                                Accept all
+
+                                &lt;span class=&quot;icon-[lucide--check] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/button&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/section&gt;
+
+            &lt;!-- Preferences backdrop --&gt;
+            &lt;button type=&quot;button&quot; @click=&quot;preferencesOpen = false&quot; aria-label=&quot;Close cookie preferences&quot; class=&quot;fixed inset-0 z-[90] bg-slate-950/50 backdrop-blur-sm&quot; class:hidden=&quot;!preferencesOpen&quot; class:block=&quot;preferencesOpen&quot; &gt;&lt;/button&gt;
+
+            &lt;!-- Preferences modal --&gt;
+            &lt;section
+                role=&quot;dialog&quot;
+                aria-modal=&quot;true&quot;
+                aria-labelledby=&quot;cookie-preferences-title&quot;
+                aria-describedby=&quot;cookie-preferences-description&quot;
+                class=&quot;fixed inset-0 z-[100] overflow-y-auto p-4 sm:p-6&quot;
+                class:hidden=&quot;!preferencesOpen&quot;
+                class:block=&quot;preferencesOpen&quot;
+            &gt;
+                &lt;div class=&quot;flex min-h-full items-end justify-center sm:items-center&quot;&gt;
+                    &lt;div
+                        class=&quot;relative w-full max-w-2xl overflow-hidden rounded-t-3xl border border-slate-200 bg-white shadow-2xl shadow-slate-950/30 dark:border-white/10 dark:bg-slate-900 dark:shadow-black/50 sm:rounded-3xl&quot;
+                    &gt;
+                        &lt;!-- Modal header --&gt;
+                        &lt;header class=&quot;border-b border-slate-200 px-5 py-5 dark:border-white/10 sm:px-6&quot;&gt;
+                            &lt;div class=&quot;flex items-start justify-between gap-4&quot;&gt;
+                                &lt;div class=&quot;flex items-start gap-4&quot;&gt;
+                                    &lt;span
+                                        class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-2xl bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300&quot;
+                                    &gt;
+                                        &lt;span class=&quot;icon-[lucide--sliders-horizontal] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;div&gt;
+                                        &lt;h2
+                                            id=&quot;cookie-preferences-title&quot;
+                                            class=&quot;text-lg font-bold tracking-tight text-slate-950 dark:text-white&quot;
+                                        &gt;
+                                            Cookie preferences
+                                        &lt;/h2&gt;
+
+                                        &lt;p
+                                            id=&quot;cookie-preferences-description&quot;
+                                            class=&quot;mt-1 text-sm leading-6 text-slate-500 dark:text-slate-400&quot;
+                                        &gt;
+                                            Choose which optional cookies WRNexusJS may use.
+                                        &lt;/p&gt;
+                                    &lt;/div&gt;
+                                &lt;/div&gt;
+
+                                &lt;button
+                                    type=&quot;button&quot;
+                                    @click=&quot;preferencesOpen = false&quot;
+                                    aria-label=&quot;Close cookie preferences&quot;
+                                    class=&quot;grid h-10 w-10 shrink-0 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:bg-white/10 dark:hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--x] h-4.5 w-4.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/button&gt;
+                            &lt;/div&gt;
+                        &lt;/header&gt;
+
+                        &lt;!-- Preference groups --&gt;
+                        &lt;div class=&quot;max-h-[60dvh] space-y-3 overflow-y-auto p-5 sm:p-6&quot;&gt;
+
+                            &lt;!-- Essential --&gt;
+                            &lt;article
+                                class=&quot;rounded-2xl bg-emerald-500/10 p-4 ring-1 ring-inset ring-emerald-500/15 transition dark:bg-emerald-500/10 dark:ring-emerald-400/10&quot;
+                            &gt;
+                                &lt;div class=&quot;flex items-start justify-between gap-4&quot;&gt;
+                                    &lt;div class=&quot;flex items-start gap-3&quot;&gt;
+                                        &lt;span
+                                            class=&quot;grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-emerald-500/15 text-emerald-700 dark:bg-emerald-400/10 dark:text-emerald-300&quot;
+                                        &gt;
+                                            &lt;span class=&quot;icon-[lucide--shield-check] h-4.5 w-4.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                        &lt;/span&gt;
+
+                                        &lt;div&gt;
+                                            &lt;div class=&quot;flex flex-wrap items-center gap-2&quot;&gt;
+                                                &lt;h3 class=&quot;text-sm font-bold text-slate-950 dark:text-white&quot;&gt;
+                                                    Essential cookies
+                                                &lt;/h3&gt;
+
+                                                &lt;span
+                                                    class=&quot;rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-emerald-700 dark:bg-emerald-400/10 dark:text-emerald-300&quot;
+                                                &gt;
+                                                    Always active
+                                                &lt;/span&gt;
+                                            &lt;/div&gt;
+
+                                            &lt;p class=&quot;mt-1.5 text-xs leading-5 text-slate-600 dark:text-slate-400&quot;&gt;
+                                                Required for authentication, security, sessions, preferences, and core website functionality.
+                                            &lt;/p&gt;
+                                        &lt;/div&gt;
+                                    &lt;/div&gt;
+
+                                    &lt;span
+                                        class=&quot;relative inline-flex h-6 w-11 shrink-0 cursor-not-allowed rounded-full bg-emerald-500&quot;
+                                        aria-hidden=&quot;true&quot;
+                                    &gt;
+                                        &lt;span class=&quot;absolute right-1 top-1 h-4 w-4 rounded-full bg-white shadow-sm&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+                                &lt;/div&gt;
+                            &lt;/article&gt;
+
+                            &lt;!-- Analytics --&gt;
+                            &lt;article
+                                class=&quot;rounded-2xl p-4 transition-all duration-200 &#123;analyticsCookies ? 'bg-indigo-50 ring-1 ring-inset ring-indigo-200 dark:bg-indigo-500/10 dark:ring-indigo-500/20' : 'bg-slate-50 ring-1 ring-inset ring-slate-200 dark:bg-white/5 dark:ring-white/10' &#125;&quot;
+                            &gt;
+                                &lt;label class=&quot;flex cursor-pointer items-start justify-between gap-4&quot;&gt;
+                                    &lt;span class=&quot;flex min-w-0 items-start gap-3&quot;&gt;
+                                        &lt;span
+                                            class=&quot;grid h-10 w-10 shrink-0 place-items-center rounded-xl transition-all duration-200 &#123;analyticsCookies ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300' : 'bg-slate-200 text-slate-500 dark:bg-white/10 dark:text-slate-400' &#125;&quot;
+                                        &gt;
+                                            &lt;span class=&quot;icon-[lucide--chart-no-axes-combined] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;min-w-0&quot;&gt;
+                                            &lt;span class=&quot;block text-sm font-bold text-slate-950 dark:text-white&quot;&gt;
+                                                Analytics cookies
+                                            &lt;/span&gt;
+
+                                            &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-600 dark:text-slate-400&quot;&gt;
+                                                Help us understand website usage, performance, and navigation patterns.
+                                            &lt;/span&gt;
+                                        &lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;relative mt-0.5 shrink-0&quot;&gt;
+                                        &lt;input
+                                            type=&quot;checkbox&quot;
+                                            name=&quot;analytics&quot;
+                                            checked=&quot;&#123;analyticsCookies&#125;&quot;
+                                            @change=&quot;analyticsCookies = event.target.checked&quot;
+                                            class=&quot;peer sr-only&quot;
+                                        /&gt;
+
+                                        &lt;span class=&quot;block h-6 w-11 rounded-full bg-slate-300 transition-colors duration-200 peer-checked:bg-indigo-600 peer-focus-visible:ring-4 peer-focus-visible:ring-indigo-500/20 dark:bg-slate-700&quot; &gt;&lt;/span&gt;
+
+                                        &lt;span class=&quot;absolute left-1 top-1 h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200 peer-checked:translate-x-5&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+                                &lt;/label&gt;
+                            &lt;/article&gt;
+
+                            &lt;!-- Personalization --&gt;
+                            &lt;article
+                                class=&quot;rounded-2xl p-4 transition-all duration-200 &#123;personalizationCookies ? 'bg-violet-50 ring-1 ring-inset ring-violet-200 dark:bg-violet-500/10 dark:ring-violet-500/20' : 'bg-slate-50 ring-1 ring-inset ring-slate-200 dark:bg-white/5 dark:ring-white/10' &#125;&quot;
+                            &gt;
+                                &lt;label class=&quot;flex cursor-pointer items-start justify-between gap-4&quot;&gt;
+                                    &lt;span class=&quot;flex min-w-0 items-start gap-3&quot;&gt;
+                                        &lt;span
+                                            class=&quot;grid h-10 w-10 shrink-0 place-items-center rounded-xl transition-all duration-200 &#123;personalizationCookies ? 'bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300' : 'bg-slate-200 text-slate-500 dark:bg-white/10 dark:text-slate-400' &#125;&quot;
+                                        &gt;
+                                            &lt;span class=&quot;icon-[lucide--sparkles] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;min-w-0&quot;&gt;
+                                            &lt;span class=&quot;block text-sm font-bold text-slate-950 dark:text-white&quot;&gt;
+                                                Personalization cookies
+                                            &lt;/span&gt;
+
+                                            &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-600 dark:text-slate-400&quot;&gt;
+                                                Remember your choices and provide a more relevant website experience.
+                                            &lt;/span&gt;
+                                        &lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;relative mt-0.5 shrink-0&quot;&gt;
+                                        &lt;input
+                                            type=&quot;checkbox&quot;
+                                            name=&quot;personalization&quot;
+                                            checked=&quot;&#123;personalizationCookies&#125;&quot;
+                                            @change=&quot;personalizationCookies = event.target.checked&quot;
+                                            class=&quot;peer sr-only&quot;
+                                        /&gt;
+
+                                        &lt;span class=&quot;block h-6 w-11 rounded-full bg-slate-300 transition-colors duration-200 peer-checked:bg-violet-600 peer-focus-visible:ring-4 peer-focus-visible:ring-violet-500/20 dark:bg-slate-700&quot; &gt;&lt;/span&gt;
+
+                                        &lt;span class=&quot;absolute left-1 top-1 h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200 peer-checked:translate-x-5&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+                                &lt;/label&gt;
+                            &lt;/article&gt;
+
+                            &lt;!-- Marketing --&gt;
+                            &lt;article
+                                class=&quot;rounded-2xl p-4 transition-all duration-200 &#123;marketingCookies ? 'bg-rose-50 ring-1 ring-inset ring-rose-200 dark:bg-rose-500/10 dark:ring-rose-500/20' : 'bg-slate-50 ring-1 ring-inset ring-slate-200 dark:bg-white/5 dark:ring-white/10' &#125;&quot;
+                            &gt;
+                                &lt;label class=&quot;flex cursor-pointer items-start justify-between gap-4&quot;&gt;
+                                    &lt;span class=&quot;flex min-w-0 items-start gap-3&quot;&gt;
+                                        &lt;span
+                                            class=&quot;grid h-10 w-10 shrink-0 place-items-center rounded-xl transition-all duration-200 &#123;marketingCookies ? 'bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300' : 'bg-slate-200 text-slate-500 dark:bg-white/10 dark:text-slate-400' &#125;&quot;
+                                        &gt;
+                                            &lt;span class=&quot;icon-[lucide--megaphone] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;min-w-0&quot;&gt;
+                                            &lt;span class=&quot;block text-sm font-bold text-slate-950 dark:text-white&quot;&gt;
+                                                Marketing cookies
+                                            &lt;/span&gt;
+
+                                            &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-600 dark:text-slate-400&quot;&gt;
+                                                Measure campaigns and show relevant WRNexusJS content across supported services.
+                                            &lt;/span&gt;
+                                        &lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;relative mt-0.5 shrink-0&quot;&gt;
+                                        &lt;input
+                                            type=&quot;checkbox&quot;
+                                            name=&quot;marketing&quot;
+                                            checked=&quot;&#123;marketingCookies&#125;&quot;
+                                            @change=&quot;marketingCookies = event.target.checked&quot;
+                                            class=&quot;peer sr-only&quot;
+                                        /&gt;
+
+                                        &lt;span class=&quot;block h-6 w-11 rounded-full bg-slate-300 transition-colors duration-200 peer-checked:bg-rose-600 peer-focus-visible:ring-4 peer-focus-visible:ring-rose-500/20 dark:bg-slate-700&quot; &gt;&lt;/span&gt;
+
+                                        &lt;span class=&quot;absolute left-1 top-1 h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200 peer-checked:translate-x-5&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+                                &lt;/label&gt;
+                            &lt;/article&gt;
+                        &lt;/div&gt;
+
+                        &lt;!-- Modal footer --&gt;
+                        &lt;footer
+                            class=&quot;border-t border-slate-200 bg-slate-50 px-5 py-4 dark:border-white/10 dark:bg-white/[0.02] sm:px-6&quot;
+                        &gt;
+                            &lt;div class=&quot;grid gap-2 sm:grid-cols-3&quot;&gt;
+                                &lt;button
+                                    type=&quot;button&quot;
+                                    @click=&quot; analyticsCookies = false; personalizationCookies = false; marketingCookies = false &quot;
+                                    class=&quot;inline-flex h-11 items-center justify-center rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 transition hover:border-slate-300 hover:bg-slate-100 hover:text-slate-950 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10 dark:hover:text-white&quot;
+                                &gt;
+                                    Reject optional
+                                &lt;/button&gt;
+
+                                &lt;button
+                                    type=&quot;button&quot;
+                                    @click=&quot; analyticsCookies = true; personalizationCookies = true; marketingCookies = true &quot;
+                                    class=&quot;inline-flex h-11 items-center justify-center rounded-xl border border-indigo-200 bg-indigo-50 px-4 text-sm font-semibold text-indigo-700 transition hover:border-indigo-300 hover:bg-indigo-100 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:bg-indigo-500/15&quot;
+                                &gt;
+                                    Enable all
+                                &lt;/button&gt;
+
+                                &lt;button
+                                    type=&quot;button&quot;
+                                    @click=&quot; preferencesOpen = false; bannerOpen = false &quot;
+                                    data-cookie-action=&quot;save-preferences&quot;
+                                    class=&quot;inline-flex h-11 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--save] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                    Save preferences
+                                &lt;/button&gt;
+                            &lt;/div&gt;
+                        &lt;/footer&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/section&gt;
+        &lt;/div&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/cookie-details-table.wrn b/app/pages/components/cookie-details-table.wrn
new file mode 100644
index 00000000..afa8d200
--- /dev/null
+++ b/app/pages/components/cookie-details-table.wrn
@@ -0,0 +1,31 @@
+page CookieDetailsTablecomponent {
+  seo {
+    title = "CookieDetailsTable component"
+    description = "Reusable cookie details table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CookieDetailsTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>CookieDetailsTable</h1><p>Reusable cookie details table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CookieDetailsTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CookieDetailsTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CookieDetailsTable.wrn</code></p><pre data-language="wrn"><code>component CookieDetailsTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/cookie-preferences-dialog.wrn b/app/pages/components/cookie-preferences-dialog.wrn
new file mode 100644
index 00000000..f2745679
--- /dev/null
+++ b/app/pages/components/cookie-preferences-dialog.wrn
@@ -0,0 +1,38 @@
+page CookiePreferencesDialogcomponent {
+  seo {
+    title = "CookiePreferencesDialog component"
+    description = "Reusable cookie preferences dialog component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CookiePreferencesDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>CookiePreferencesDialog</h1><p>Reusable cookie preferences dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>7 props</span><span>0 slots</span><span>2 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CookiePreferencesDialog title=&quot;Cookie preferences&quot; description=&quot;Choose which optional cookies you allow. Essential cookies are always enabled.&quot; saveLabel=&quot;Save preferences&quot; acceptLabel=&quot;Accept all&quot; rejectLabel=&quot;Reject optional&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CookiePreferencesDialog&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Cookie preferences&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Choose which optional cookies you allow. Essential cookies are always enabled.&quot;</code></td></tr><tr><td><code>saveLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Save preferences&quot;</code></td></tr><tr><td><code>acceptLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Accept all&quot;</code></td></tr><tr><td><code>rejectLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Reject optional&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>change</code></li><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CookiePreferencesDialog.wrn</code></p><pre data-language="wrn"><code>component CookiePreferencesDialog &#123;
+  props &#123;
+    title = &quot;Cookie preferences&quot;
+    description = &quot;Choose which optional cookies you allow. Essential cookies are always enabled.&quot;
+    saveLabel = &quot;Save preferences&quot;
+    acceptLabel = &quot;Accept all&quot;
+    rejectLabel = &quot;Reject optional&quot;
+    open = false
+    class = &quot;&quot;
+  &#125;
+  state visible = open
+  state analytics = false
+  state marketing = false
+  view &#123;
+    &lt;div data-show=&quot;visible&quot; class=&quot;wire-overlay &#123;class&#125;&quot; role=&quot;presentation&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-labelledby=&quot;cookie-preferences-title&quot; class=&quot;wire-dialog wire-cookie-dialog&quot;&gt;&lt;h2 id=&quot;cookie-preferences-title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;div class=&quot;wire-cookie-list&quot;&gt;&lt;label class=&quot;wire-cookie-option&quot;&gt;&lt;span&gt;&lt;strong&gt;Essential&lt;/strong&gt;&lt;small&gt;Required for security and core functionality.&lt;/small&gt;&lt;/span&gt;&lt;input type=&quot;checkbox&quot; checked disabled /&gt;&lt;/label&gt;&lt;label class=&quot;wire-cookie-option&quot;&gt;&lt;span&gt;&lt;strong&gt;Analytics&lt;/strong&gt;&lt;small&gt;Helps improve product performance.&lt;/small&gt;&lt;/span&gt;&lt;input type=&quot;checkbox&quot; checked=&quot;&#123;analytics&#125;&quot; @change=&quot;analytics = event.target.checked&quot; /&gt;&lt;/label&gt;&lt;label class=&quot;wire-cookie-option&quot;&gt;&lt;span&gt;&lt;strong&gt;Marketing&lt;/strong&gt;&lt;small&gt;Supports relevant campaigns and measurement.&lt;/small&gt;&lt;/span&gt;&lt;input type=&quot;checkbox&quot; checked=&quot;&#123;marketing&#125;&quot; @change=&quot;marketing = event.target.checked&quot; /&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class=&quot;wire-dialog__actions wire-dialog__actions--wrap&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot; @click=&quot;analytics = false; marketing = false&quot;&gt;&#123;rejectLabel&#125;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--default&quot; @click=&quot;analytics = true; marketing = true&quot;&gt;&#123;acceptLabel&#125;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--primary&quot; @click=&quot;visible = false&quot;&gt;&#123;saveLabel&#125;&lt;/button&gt;&lt;/div&gt;&lt;/section&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/cookie-table.wrn b/app/pages/components/cookie-table.wrn
new file mode 100644
index 00000000..74120922
--- /dev/null
+++ b/app/pages/components/cookie-table.wrn
@@ -0,0 +1,31 @@
+page CookieTablecomponent {
+  seo {
+    title = "CookieTable component"
+    description = "Reusable cookie table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CookieTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>CookieTable</h1><p>Reusable cookie table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CookieTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CookieTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CookieTable.wrn</code></p><pre data-language="wrn"><code>component CookieTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/coordinates-input.wrn b/app/pages/components/coordinates-input.wrn
new file mode 100644
index 00000000..5940d86c
--- /dev/null
+++ b/app/pages/components/coordinates-input.wrn
@@ -0,0 +1,37 @@
+page CoordinatesInputcomponent {
+  seo {
+    title = "CoordinatesInput component"
+    description = "Reusable coordinates input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CoordinatesInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CoordinatesInput</h1><p>Reusable coordinates input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CoordinatesInput label=&quot;Coordinates&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CoordinatesInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Coordinates&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CoordinatesInput.wrn</code></p><pre data-language="wrn"><code>component CoordinatesInput &#123;
+  props &#123;
+    label = &quot;Coordinates&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/coordinates-picker.wrn b/app/pages/components/coordinates-picker.wrn
new file mode 100644
index 00000000..22037a40
--- /dev/null
+++ b/app/pages/components/coordinates-picker.wrn
@@ -0,0 +1,37 @@
+page CoordinatesPickercomponent {
+  seo {
+    title = "CoordinatesPicker component"
+    description = "Reusable coordinates picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CoordinatesPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CoordinatesPicker</h1><p>Reusable coordinates picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CoordinatesPicker label=&quot;Coordinates&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CoordinatesPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Coordinates&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CoordinatesPicker.wrn</code></p><pre data-language="wrn"><code>component CoordinatesPicker &#123;
+  props &#123;
+    label = &quot;Coordinates&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/copy-button.wrn b/app/pages/components/copy-button.wrn
new file mode 100644
index 00000000..aaa6380d
--- /dev/null
+++ b/app/pages/components/copy-button.wrn
@@ -0,0 +1,30 @@
+page CopyButtoncomponent {
+  seo {
+    title = "CopyButton component"
+    description = "Reusable copy button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CopyButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>CopyButton</h1><p>Reusable copy button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CopyButton label=&quot;Action&quot; type=&quot;button&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CopyButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CopyButton.wrn</code></p><pre data-language="wrn"><code>component CopyButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    type = &quot;button&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;button type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--default &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/copy-code-button.wrn b/app/pages/components/copy-code-button.wrn
new file mode 100644
index 00000000..c2f48834
--- /dev/null
+++ b/app/pages/components/copy-code-button.wrn
@@ -0,0 +1,32 @@
+page CopyCodeButtoncomponent {
+  seo {
+    title = "CopyCodeButton component"
+    description = "Reusable copy code button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CopyCodeButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>CopyCodeButton</h1><p>Reusable copy code button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CopyCodeButton label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CopyCodeButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CopyCodeButton.wrn</code></p><pre data-language="wrn"><code>component CopyCodeButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/copy-secret-field.wrn b/app/pages/components/copy-secret-field.wrn
new file mode 100644
index 00000000..d9ae541c
--- /dev/null
+++ b/app/pages/components/copy-secret-field.wrn
@@ -0,0 +1,37 @@
+page CopySecretFieldcomponent {
+  seo {
+    title = "CopySecretField component"
+    description = "Reusable copy secret field component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CopySecretField</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CopySecretField</h1><p>Reusable copy secret field component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CopySecretField label=&quot;CopySecret&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CopySecretField&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;CopySecret&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CopySecretField.wrn</code></p><pre data-language="wrn"><code>component CopySecretField &#123;
+  props &#123;
+    label = &quot;CopySecret&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/cost-breakdown-chart.wrn b/app/pages/components/cost-breakdown-chart.wrn
new file mode 100644
index 00000000..8ce07750
--- /dev/null
+++ b/app/pages/components/cost-breakdown-chart.wrn
@@ -0,0 +1,32 @@
+page CostBreakdownChartcomponent {
+  seo {
+    title = "CostBreakdownChart component"
+    description = "Reusable cost breakdown chart component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CostBreakdownChart</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>CostBreakdownChart</h1><p>Reusable cost breakdown chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CostBreakdownChart title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CostBreakdownChart&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CostBreakdownChart.wrn</code></p><pre data-language="wrn"><code>component CostBreakdownChart &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/cost-summary.wrn b/app/pages/components/cost-summary.wrn
new file mode 100644
index 00000000..9925f9f1
--- /dev/null
+++ b/app/pages/components/cost-summary.wrn
@@ -0,0 +1,34 @@
+page CostSummarycomponent {
+  seo {
+    title = "CostSummary component"
+    description = "Reusable cost summary component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CostSummary</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>CostSummary</h1><p>Reusable cost summary component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CostSummary eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CostSummary&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CostSummary.wrn</code></p><pre data-language="wrn"><code>component CostSummary &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/counter.wrn b/app/pages/components/counter.wrn
new file mode 100644
index 00000000..2e708e4a
--- /dev/null
+++ b/app/pages/components/counter.wrn
@@ -0,0 +1,29 @@
+page Countercomponent {
+  seo {
+    title = "Counter component"
+    description = "Reusable counter component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Counter</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>Counter</h1><p>Reusable counter component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Counter label=&quot;Status&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Counter&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Status&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Counter.wrn</code></p><pre data-language="wrn"><code>component Counter &#123;
+  props &#123;
+    label = &quot;Status&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-badge wire-badge--&#123;variant&#125; wire-catalog-badge wire-catalog-badge--counter &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/country-calling-code-input.wrn b/app/pages/components/country-calling-code-input.wrn
new file mode 100644
index 00000000..dcea96aa
--- /dev/null
+++ b/app/pages/components/country-calling-code-input.wrn
@@ -0,0 +1,37 @@
+page CountryCallingCodeInputcomponent {
+  seo {
+    title = "CountryCallingCodeInput component"
+    description = "Reusable country calling code input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CountryCallingCodeInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CountryCallingCodeInput</h1><p>Reusable country calling code input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CountryCallingCodeInput label=&quot;CountryCallingCode&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CountryCallingCodeInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;CountryCallingCode&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CountryCallingCodeInput.wrn</code></p><pre data-language="wrn"><code>component CountryCallingCodeInput &#123;
+  props &#123;
+    label = &quot;CountryCallingCode&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/country-calling-code-selector.wrn b/app/pages/components/country-calling-code-selector.wrn
new file mode 100644
index 00000000..8637eccb
--- /dev/null
+++ b/app/pages/components/country-calling-code-selector.wrn
@@ -0,0 +1,37 @@
+page CountryCallingCodeSelectorcomponent {
+  seo {
+    title = "CountryCallingCodeSelector component"
+    description = "Reusable country calling code selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CountryCallingCodeSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CountryCallingCodeSelector</h1><p>Reusable country calling code selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CountryCallingCodeSelector label=&quot;CountryCallingCode&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CountryCallingCodeSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;CountryCallingCode&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CountryCallingCodeSelector.wrn</code></p><pre data-language="wrn"><code>component CountryCallingCodeSelector &#123;
+  props &#123;
+    label = &quot;CountryCallingCode&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/country-selector.wrn b/app/pages/components/country-selector.wrn
new file mode 100644
index 00000000..8bc6f6a0
--- /dev/null
+++ b/app/pages/components/country-selector.wrn
@@ -0,0 +1,37 @@
+page CountrySelectorcomponent {
+  seo {
+    title = "CountrySelector component"
+    description = "Reusable country selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CountrySelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CountrySelector</h1><p>Reusable country selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CountrySelector label=&quot;Country&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CountrySelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Country&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CountrySelector.wrn</code></p><pre data-language="wrn"><code>component CountrySelector &#123;
+  props &#123;
+    label = &quot;Country&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/coupon-input.wrn b/app/pages/components/coupon-input.wrn
new file mode 100644
index 00000000..2bcee108
--- /dev/null
+++ b/app/pages/components/coupon-input.wrn
@@ -0,0 +1,37 @@
+page CouponInputcomponent {
+  seo {
+    title = "CouponInput component"
+    description = "Reusable coupon input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CouponInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CouponInput</h1><p>Reusable coupon input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CouponInput label=&quot;Coupon&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CouponInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Coupon&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CouponInput.wrn</code></p><pre data-language="wrn"><code>component CouponInput &#123;
+  props &#123;
+    label = &quot;Coupon&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/credit-amount-input.wrn b/app/pages/components/credit-amount-input.wrn
new file mode 100644
index 00000000..ca6b6653
--- /dev/null
+++ b/app/pages/components/credit-amount-input.wrn
@@ -0,0 +1,37 @@
+page CreditAmountInputcomponent {
+  seo {
+    title = "CreditAmountInput component"
+    description = "Reusable credit amount input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CreditAmountInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CreditAmountInput</h1><p>Reusable credit amount input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CreditAmountInput label=&quot;CreditAmount&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CreditAmountInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;CreditAmount&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CreditAmountInput.wrn</code></p><pre data-language="wrn"><code>component CreditAmountInput &#123;
+  props &#123;
+    label = &quot;CreditAmount&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/cron-builder.wrn b/app/pages/components/cron-builder.wrn
new file mode 100644
index 00000000..fe6e16e0
--- /dev/null
+++ b/app/pages/components/cron-builder.wrn
@@ -0,0 +1,34 @@
+page CronBuildercomponent {
+  seo {
+    title = "CronBuilder component"
+    description = "Reusable cron builder component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CronBuilder</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>CronBuilder</h1><p>Reusable cron builder component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CronBuilder eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CronBuilder&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CronBuilder.wrn</code></p><pre data-language="wrn"><code>component CronBuilder &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/cron-input.wrn b/app/pages/components/cron-input.wrn
new file mode 100644
index 00000000..a9a3b421
--- /dev/null
+++ b/app/pages/components/cron-input.wrn
@@ -0,0 +1,37 @@
+page CronInputcomponent {
+  seo {
+    title = "CronInput component"
+    description = "Reusable cron input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CronInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CronInput</h1><p>Reusable cron input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CronInput label=&quot;Cron&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CronInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Cron&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CronInput.wrn</code></p><pre data-language="wrn"><code>component CronInput &#123;
+  props &#123;
+    label = &quot;Cron&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/csv-upload.wrn b/app/pages/components/csv-upload.wrn
new file mode 100644
index 00000000..3d46d0b0
--- /dev/null
+++ b/app/pages/components/csv-upload.wrn
@@ -0,0 +1,34 @@
+page CsvUploadcomponent {
+  seo {
+    title = "CsvUpload component"
+    description = "Reusable csv upload component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CsvUpload</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>CsvUpload</h1><p>Reusable csv upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CsvUpload eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CsvUpload&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CsvUpload.wrn</code></p><pre data-language="wrn"><code>component CsvUpload &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/ctasection.wrn b/app/pages/components/ctasection.wrn
new file mode 100644
index 00000000..8b119e56
--- /dev/null
+++ b/app/pages/components/ctasection.wrn
@@ -0,0 +1,36 @@
+page CTASectioncomponent {
+  seo {
+    title = "CTASection component"
+    description = "Reusable c t a section component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CTASection</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>CTASection</h1><p>Reusable c t a section component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CTASection eyebrow=&quot;Ready?&quot; title=&quot;Start building today&quot; description=&quot;description&quot; primaryLabel=&quot;Get started&quot; primaryHref=&quot;#&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CTASection&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Ready?&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Start building today&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>primaryLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Get started&quot;</code></td></tr><tr><td><code>primaryHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;#&quot;</code></td></tr><tr><td><code>secondaryLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Contact sales&quot;</code></td></tr><tr><td><code>secondaryHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;#&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CTASection.wrn</code></p><pre data-language="wrn"><code>component CTASection &#123;
+  props &#123;
+    class = &quot;&quot;
+    eyebrow = &quot;Ready?&quot;
+    title = &quot;Start building today&quot;
+    description = &quot;&quot;
+    primaryLabel = &quot;Get started&quot;
+    primaryHref = &quot;#&quot;
+    secondaryLabel = &quot;Contact sales&quot;
+    secondaryHref = &quot;#&quot;
+  &#125;
+  view &#123;
+    &lt;section class=&quot;overflow-hidden rounded-3xl bg-gradient-to-br from-violet-600 via-violet-700 to-fuchsia-700 text-center text-white shadow-2xl &#123;class&#125;&quot;&gt;&lt;p class=&quot;text-sm font-bold uppercase tracking-[0.18em] text-violet-100&quot;&gt;&#123;eyebrow&#125;&lt;/p&gt;&lt;h2 class=&quot;mx-auto mt-3 max-w-3xl text-3xl font-black sm:text-4xl&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;mx-auto mt-4 max-w-2xl text-violet-100&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;div class=&quot;mt-8 flex flex-wrap justify-center gap-3&quot;&gt;&lt;a href=&quot;&#123;primaryHref&#125;&quot; class=&quot;inline-flex min-h-12 items-center rounded-xl bg-white px-5 font-semibold text-violet-700 shadow-lg transition hover:-translate-y-0.5&quot;&gt;&#123;primaryLabel&#125;&lt;/a&gt;&lt;a data-show=&quot;secondaryLabel&quot; href=&quot;&#123;secondaryHref&#125;&quot; class=&quot;inline-flex min-h-12 items-center rounded-xl border border-white/30 px-5 font-semibold text-white transition hover:bg-white/10&quot;&gt;&#123;secondaryLabel&#125;&lt;/a&gt;&lt;/div&gt;&lt;/section&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/currency-input.wrn b/app/pages/components/currency-input.wrn
new file mode 100644
index 00000000..2220f749
--- /dev/null
+++ b/app/pages/components/currency-input.wrn
@@ -0,0 +1,37 @@
+page CurrencyInputcomponent {
+  seo {
+    title = "CurrencyInput component"
+    description = "Reusable currency input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CurrencyInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CurrencyInput</h1><p>Reusable currency input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CurrencyInput label=&quot;Currency&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CurrencyInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Currency&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CurrencyInput.wrn</code></p><pre data-language="wrn"><code>component CurrencyInput &#123;
+  props &#123;
+    label = &quot;Currency&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/currency-selector.wrn b/app/pages/components/currency-selector.wrn
new file mode 100644
index 00000000..df83e645
--- /dev/null
+++ b/app/pages/components/currency-selector.wrn
@@ -0,0 +1,37 @@
+page CurrencySelectorcomponent {
+  seo {
+    title = "CurrencySelector component"
+    description = "Reusable currency selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CurrencySelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CurrencySelector</h1><p>Reusable currency selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CurrencySelector label=&quot;Currency&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CurrencySelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Currency&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CurrencySelector.wrn</code></p><pre data-language="wrn"><code>component CurrencySelector &#123;
+  props &#123;
+    label = &quot;Currency&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/current-password-input.wrn b/app/pages/components/current-password-input.wrn
new file mode 100644
index 00000000..198d73d8
--- /dev/null
+++ b/app/pages/components/current-password-input.wrn
@@ -0,0 +1,37 @@
+page CurrentPasswordInputcomponent {
+  seo {
+    title = "CurrentPasswordInput component"
+    description = "Reusable current password input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CurrentPasswordInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CurrentPasswordInput</h1><p>Reusable current password input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CurrentPasswordInput label=&quot;CurrentPassword&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CurrentPasswordInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;CurrentPassword&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CurrentPasswordInput.wrn</code></p><pre data-language="wrn"><code>component CurrentPasswordInput &#123;
+  props &#123;
+    label = &quot;CurrentPassword&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/customer-logo.wrn b/app/pages/components/customer-logo.wrn
new file mode 100644
index 00000000..d05bb992
--- /dev/null
+++ b/app/pages/components/customer-logo.wrn
@@ -0,0 +1,34 @@
+page CustomerLogocomponent {
+  seo {
+    title = "CustomerLogo component"
+    description = "Reusable customer logo component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CustomerLogo</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>CustomerLogo</h1><p>Reusable customer logo component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CustomerLogo eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CustomerLogo&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CustomerLogo.wrn</code></p><pre data-language="wrn"><code>component CustomerLogo &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/customer-story-card.wrn b/app/pages/components/customer-story-card.wrn
new file mode 100644
index 00000000..6a1446c9
--- /dev/null
+++ b/app/pages/components/customer-story-card.wrn
@@ -0,0 +1,34 @@
+page CustomerStoryCardcomponent {
+  seo {
+    title = "CustomerStoryCard component"
+    description = "Reusable customer story card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CustomerStoryCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>CustomerStoryCard</h1><p>Reusable customer story card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CustomerStoryCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CustomerStoryCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CustomerStoryCard.wrn</code></p><pre data-language="wrn"><code>component CustomerStoryCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/danger-button.wrn b/app/pages/components/danger-button.wrn
new file mode 100644
index 00000000..50985f37
--- /dev/null
+++ b/app/pages/components/danger-button.wrn
@@ -0,0 +1,30 @@
+page DangerButtoncomponent {
+  seo {
+    title = "DangerButton component"
+    description = "Reusable danger button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DangerButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>DangerButton</h1><p>Reusable danger button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DangerButton label=&quot;Action&quot; type=&quot;button&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DangerButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DangerButton.wrn</code></p><pre data-language="wrn"><code>component DangerButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    type = &quot;button&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;button type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--danger &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/data-protection-card.wrn b/app/pages/components/data-protection-card.wrn
new file mode 100644
index 00000000..d4f75cec
--- /dev/null
+++ b/app/pages/components/data-protection-card.wrn
@@ -0,0 +1,34 @@
+page DataProtectionCardcomponent {
+  seo {
+    title = "DataProtectionCard component"
+    description = "Reusable data protection card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DataProtectionCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>DataProtectionCard</h1><p>Reusable data protection card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DataProtectionCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DataProtectionCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DataProtectionCard.wrn</code></p><pre data-language="wrn"><code>component DataProtectionCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/data-retention-table.wrn b/app/pages/components/data-retention-table.wrn
new file mode 100644
index 00000000..77501719
--- /dev/null
+++ b/app/pages/components/data-retention-table.wrn
@@ -0,0 +1,31 @@
+page DataRetentionTablecomponent {
+  seo {
+    title = "DataRetentionTable component"
+    description = "Reusable data retention table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DataRetentionTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>DataRetentionTable</h1><p>Reusable data retention table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DataRetentionTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DataRetentionTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DataRetentionTable.wrn</code></p><pre data-language="wrn"><code>component DataRetentionTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/data-table.wrn b/app/pages/components/data-table.wrn
new file mode 100644
index 00000000..c1c63f26
--- /dev/null
+++ b/app/pages/components/data-table.wrn
@@ -0,0 +1,34 @@
+page DataTablecomponent {
+  seo {
+    title = "DataTable component"
+    description = "Reusable data table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DataTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>DataTable</h1><p>Reusable data table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DataTable caption=&quot;Data table&quot; columns=&quot;[]&quot; rows=&quot;[]&quot; emptyMessage=&quot;No data available.&quot; striped=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DataTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>caption</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Data table&quot;</code></td></tr><tr><td><code>columns</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>rows</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>emptyMessage</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No data available.&quot;</code></td></tr><tr><td><code>striped</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DataTable.wrn</code></p><pre data-language="wrn"><code>component DataTable &#123;
+  props &#123;
+    caption = &quot;Data table&quot;
+    columns = []
+    rows = []
+    emptyMessage = &quot;No data available.&quot;
+    striped = false
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;wire-table-wrap &#123;class&#125;&quot; tabindex=&quot;0&quot; role=&quot;region&quot; aria-label=&quot;&#123;caption&#125;&quot;&gt;&lt;table class=&quot;wire-table &#123;striped ? 'wire-table--striped' : ''&#125;&quot;&gt;&lt;caption class=&quot;wire-visually-hidden&quot;&gt;&#123;caption&#125;&lt;/caption&gt;&lt;thead&gt;&lt;tr&gt;&#123;#each columns as column&#125;&lt;th scope=&quot;col&quot;&gt;&#123;column.label&#125;&lt;/th&gt;&#123;/each&#125;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&#123;#each rows as row&#125;&lt;tr&gt;&#123;#each columns as column&#125;&lt;td&gt;&#123;row[column.key]&#125;&lt;/td&gt;&#123;/each&#125;&lt;/tr&gt;&#123;:empty&#125;&lt;tr&gt;&lt;td colspan=&quot;&#123;columns.length&#125;&quot;&gt;&#123;emptyMessage&#125;&lt;/td&gt;&lt;/tr&gt;&#123;/each&#125;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/date-input.wrn b/app/pages/components/date-input.wrn
new file mode 100644
index 00000000..73886288
--- /dev/null
+++ b/app/pages/components/date-input.wrn
@@ -0,0 +1,45 @@
+page DateInputcomponent {
+  seo {
+    title = "DateInput component"
+    description = "Reusable date input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DateInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>DateInput</h1><p>Reusable date input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>12 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DateInput id=&quot;id&quot; name=&quot;name&quot; label=&quot;Date&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DateInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Date&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>autocomplete</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DateInput.wrn</code></p><pre data-language="wrn"><code>component DateInput &#123;
+  props &#123;
+    class = &quot;&quot;
+    id: string = &quot;&quot;
+    name: string = &quot;&quot;
+    label: string = &quot;Date&quot;
+    value: string = &quot;&quot;
+    placeholder: string = &quot;&quot;
+    help: string = &quot;&quot;
+    error: string = &quot;&quot;
+    required: boolean = false
+    disabled: boolean = false
+    readonly: boolean = false
+    autocomplete: string = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;space-y-2 &#123;class&#125;&quot;&gt;
+      &lt;label for=&quot;&#123;id&#125;&quot; class=&quot;block text-sm font-semibold text-slate-800 dark:text-slate-200&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;ml-1 text-red-500&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
+      &lt;input id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; type=&quot;date&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; autocomplete=&quot;&#123;autocomplete&#125;&quot; aria-invalid=&quot;&#123;!!error&#125;&quot; aria-describedby=&quot;&#123;id&#125;-help &#123;id&#125;-error&quot; class=&quot;min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white &#123;error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'&#125;&quot; /&gt;
+      &lt;p id=&quot;&#123;id&#125;-help&quot; data-show=&quot;help &amp;&amp; !error&quot; class=&quot;text-sm text-slate-500 dark:text-slate-400&quot;&gt;&#123;help&#125;&lt;/p&gt;
+      &lt;p id=&quot;&#123;id&#125;-error&quot; data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;text-sm font-medium text-red-600 dark:text-red-400&quot;&gt;&#123;error&#125;&lt;/p&gt;
+    &lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/date-picker.wrn b/app/pages/components/date-picker.wrn
new file mode 100644
index 00000000..b2e8037d
--- /dev/null
+++ b/app/pages/components/date-picker.wrn
@@ -0,0 +1,36 @@
+page DatePickercomponent {
+  seo {
+    title = "DatePicker component"
+    description = "Reusable date picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DatePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>DatePicker</h1><p>Reusable date picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DatePicker id=&quot;date&quot; name=&quot;date&quot; label=&quot;Date&quot; value=&quot;value&quot; min=&quot;min&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DatePicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;date&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;date&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Date&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DatePicker.wrn</code></p><pre data-language="wrn"><code>component DatePicker &#123;
+  props &#123;
+    class = &quot;&quot;
+    id: string = &quot;date&quot;
+    name: string = &quot;date&quot;
+    label: string = &quot;Date&quot;
+    value: string = &quot;&quot;
+    min: string = &quot;&quot;
+    max: string = &quot;&quot;
+    required: boolean = false
+  &#125;
+  view &#123;
+    &lt;DateInput class=&quot;&#123;class&#125;&quot; id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; label=&quot;&#123;label&#125;&quot; value=&quot;&#123;value&#125;&quot; required=&quot;&#123;required&#125;&quot; /&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/date-range-calendar.wrn b/app/pages/components/date-range-calendar.wrn
new file mode 100644
index 00000000..7895b49e
--- /dev/null
+++ b/app/pages/components/date-range-calendar.wrn
@@ -0,0 +1,34 @@
+page DateRangeCalendarcomponent {
+  seo {
+    title = "DateRangeCalendar component"
+    description = "Reusable date range calendar component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DateRangeCalendar</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>DateRangeCalendar</h1><p>Reusable date range calendar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DateRangeCalendar eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DateRangeCalendar&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DateRangeCalendar.wrn</code></p><pre data-language="wrn"><code>component DateRangeCalendar &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/date-range-picker.wrn b/app/pages/components/date-range-picker.wrn
new file mode 100644
index 00000000..9534b969
--- /dev/null
+++ b/app/pages/components/date-range-picker.wrn
@@ -0,0 +1,32 @@
+page DateRangePickercomponent {
+  seo {
+    title = "DateRangePicker component"
+    description = "Reusable date range picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DateRangePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>DateRangePicker</h1><p>Reusable date range picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DateRangePicker label=&quot;Date range&quot; startName=&quot;startDate&quot; endName=&quot;endDate&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DateRangePicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Date range&quot;</code></td></tr><tr><td><code>startName</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;startDate&quot;</code></td></tr><tr><td><code>endName</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;endDate&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DateRangePicker.wrn</code></p><pre data-language="wrn"><code>component DateRangePicker &#123;
+  props &#123;
+    class = &quot;&quot;
+    label = &quot;Date range&quot;
+    startName = &quot;startDate&quot;
+    endName = &quot;endDate&quot;
+  &#125;
+  view &#123;
+    &lt;fieldset class=&quot;&#123;class&#125;&quot;&gt;&lt;legend class=&quot;mb-2 text-sm font-semibold&quot;&gt;&#123;label&#125;&lt;/legend&gt;&lt;div class=&quot;grid gap-3 sm:grid-cols-2&quot;&gt;&lt;DateInput id=&quot;&#123;startName&#125;&quot; name=&quot;&#123;startName&#125;&quot; label=&quot;Start date&quot; /&gt;&lt;DateInput id=&quot;&#123;endName&#125;&quot; name=&quot;&#123;endName&#125;&quot; label=&quot;End date&quot; /&gt;&lt;/div&gt;&lt;/fieldset&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/date-range-slider.wrn b/app/pages/components/date-range-slider.wrn
new file mode 100644
index 00000000..268b1192
--- /dev/null
+++ b/app/pages/components/date-range-slider.wrn
@@ -0,0 +1,34 @@
+page DateRangeSlidercomponent {
+  seo {
+    title = "DateRangeSlider component"
+    description = "Reusable date range slider component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DateRangeSlider</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>DateRangeSlider</h1><p>Reusable date range slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DateRangeSlider eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DateRangeSlider&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DateRangeSlider.wrn</code></p><pre data-language="wrn"><code>component DateRangeSlider &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/date-time-input.wrn b/app/pages/components/date-time-input.wrn
new file mode 100644
index 00000000..6d0456a9
--- /dev/null
+++ b/app/pages/components/date-time-input.wrn
@@ -0,0 +1,45 @@
+page DateTimeInputcomponent {
+  seo {
+    title = "DateTimeInput component"
+    description = "Reusable date time input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DateTimeInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>DateTimeInput</h1><p>Reusable date time input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>12 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DateTimeInput id=&quot;id&quot; name=&quot;name&quot; label=&quot;DateTime&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DateTimeInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;DateTime&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>autocomplete</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DateTimeInput.wrn</code></p><pre data-language="wrn"><code>component DateTimeInput &#123;
+  props &#123;
+    class = &quot;&quot;
+    id = &quot;&quot;
+    name = &quot;&quot;
+    label = &quot;DateTime&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    help = &quot;&quot;
+    error = &quot;&quot;
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;space-y-2 &#123;class&#125;&quot;&gt;
+      &lt;label for=&quot;&#123;id&#125;&quot; class=&quot;block text-sm font-semibold text-slate-800 dark:text-slate-200&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;ml-1 text-red-500&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
+      &lt;input id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; type=&quot;datetime-local&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; autocomplete=&quot;&#123;autocomplete&#125;&quot; aria-invalid=&quot;&#123;!!error&#125;&quot; aria-describedby=&quot;&#123;id&#125;-help &#123;id&#125;-error&quot; class=&quot;min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white &#123;error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'&#125;&quot; /&gt;
+      &lt;p id=&quot;&#123;id&#125;-help&quot; data-show=&quot;help &amp;&amp; !error&quot; class=&quot;text-sm text-slate-500 dark:text-slate-400&quot;&gt;&#123;help&#125;&lt;/p&gt;
+      &lt;p id=&quot;&#123;id&#125;-error&quot; data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;text-sm font-medium text-red-600 dark:text-red-400&quot;&gt;&#123;error&#125;&lt;/p&gt;
+    &lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/date-time-picker.wrn b/app/pages/components/date-time-picker.wrn
new file mode 100644
index 00000000..661e6bd3
--- /dev/null
+++ b/app/pages/components/date-time-picker.wrn
@@ -0,0 +1,35 @@
+page DateTimePickercomponent {
+  seo {
+    title = "DateTimePicker component"
+    description = "Reusable date time picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DateTimePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>DateTimePicker</h1><p>Reusable date time picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>9 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DateTimePicker id=&quot;datetime-picker&quot; name=&quot;datetime&quot; label=&quot;Date and time&quot; value=&quot;value&quot; min=&quot;min&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DateTimePicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;datetime-picker&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;datetime&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Date and time&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DateTimePicker.wrn</code></p><pre data-language="wrn"><code>component DateTimePicker &#123;
+  props &#123;
+    id = &quot;datetime-picker&quot;
+    name = &quot;datetime&quot;
+    label = &quot;Date and time&quot;
+    value = &quot;&quot;
+    min = &quot;&quot;
+    max = &quot;&quot;
+    required = false
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-field &#123;class&#125;&quot;&gt;&lt;label for=&quot;&#123;id&#125;&quot; class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;/label&gt;&lt;input id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; type=&quot;datetime-local&quot; value=&quot;&#123;value&#125;&quot; min=&quot;&#123;min&#125;&quot; max=&quot;&#123;max&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/date-time-range-picker.wrn b/app/pages/components/date-time-range-picker.wrn
new file mode 100644
index 00000000..2e1e7ca6
--- /dev/null
+++ b/app/pages/components/date-time-range-picker.wrn
@@ -0,0 +1,37 @@
+page DateTimeRangePickercomponent {
+  seo {
+    title = "DateTimeRangePicker component"
+    description = "Reusable date time range picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DateTimeRangePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>DateTimeRangePicker</h1><p>Reusable date time range picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DateTimeRangePicker label=&quot;DateTimeRange&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DateTimeRangePicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;DateTimeRange&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DateTimeRangePicker.wrn</code></p><pre data-language="wrn"><code>component DateTimeRangePicker &#123;
+  props &#123;
+    label = &quot;DateTimeRange&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/decimal-input.wrn b/app/pages/components/decimal-input.wrn
new file mode 100644
index 00000000..c121811d
--- /dev/null
+++ b/app/pages/components/decimal-input.wrn
@@ -0,0 +1,37 @@
+page DecimalInputcomponent {
+  seo {
+    title = "DecimalInput component"
+    description = "Reusable decimal input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DecimalInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>DecimalInput</h1><p>Reusable decimal input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DecimalInput label=&quot;Decimal&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DecimalInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Decimal&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DecimalInput.wrn</code></p><pre data-language="wrn"><code>component DecimalInput &#123;
+  props &#123;
+    label = &quot;Decimal&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/definition-list.wrn b/app/pages/components/definition-list.wrn
new file mode 100644
index 00000000..d34b7f40
--- /dev/null
+++ b/app/pages/components/definition-list.wrn
@@ -0,0 +1,31 @@
+page DefinitionListcomponent {
+  seo {
+    title = "DefinitionList component"
+    description = "Reusable definition list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DefinitionList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>DefinitionList</h1><p>Reusable definition list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DefinitionList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DefinitionList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DefinitionList.wrn</code></p><pre data-language="wrn"><code>component DefinitionList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/delete-confirmation-dialog.wrn b/app/pages/components/delete-confirmation-dialog.wrn
new file mode 100644
index 00000000..4a414e7e
--- /dev/null
+++ b/app/pages/components/delete-confirmation-dialog.wrn
@@ -0,0 +1,31 @@
+page DeleteConfirmationDialogcomponent {
+  seo {
+    title = "DeleteConfirmationDialog component"
+    description = "Reusable delete confirmation dialog component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DeleteConfirmationDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>DeleteConfirmationDialog</h1><p>Reusable delete confirmation dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DeleteConfirmationDialog title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DeleteConfirmationDialog&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DeleteConfirmationDialog.wrn</code></p><pre data-language="wrn"><code>component DeleteConfirmationDialog &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/delivery-preview.wrn b/app/pages/components/delivery-preview.wrn
new file mode 100644
index 00000000..1ff1e44f
--- /dev/null
+++ b/app/pages/components/delivery-preview.wrn
@@ -0,0 +1,34 @@
+page DeliveryPreviewcomponent {
+  seo {
+    title = "DeliveryPreview component"
+    description = "Reusable delivery preview component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DeliveryPreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>DeliveryPreview</h1><p>Reusable delivery preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DeliveryPreview eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DeliveryPreview&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DeliveryPreview.wrn</code></p><pre data-language="wrn"><code>component DeliveryPreview &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/delivery-status-chart.wrn b/app/pages/components/delivery-status-chart.wrn
new file mode 100644
index 00000000..3ff372f5
--- /dev/null
+++ b/app/pages/components/delivery-status-chart.wrn
@@ -0,0 +1,32 @@
+page DeliveryStatusChartcomponent {
+  seo {
+    title = "DeliveryStatusChart component"
+    description = "Reusable delivery status chart component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DeliveryStatusChart</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>DeliveryStatusChart</h1><p>Reusable delivery status chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DeliveryStatusChart title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DeliveryStatusChart&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DeliveryStatusChart.wrn</code></p><pre data-language="wrn"><code>component DeliveryStatusChart &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/delivery-status-timeline.wrn b/app/pages/components/delivery-status-timeline.wrn
new file mode 100644
index 00000000..35c07add
--- /dev/null
+++ b/app/pages/components/delivery-status-timeline.wrn
@@ -0,0 +1,32 @@
+page DeliveryStatusTimelinecomponent {
+  seo {
+    title = "DeliveryStatusTimeline component"
+    description = "Reusable delivery status timeline component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DeliveryStatusTimeline</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>DeliveryStatusTimeline</h1><p>Reusable delivery status timeline component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DeliveryStatusTimeline title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DeliveryStatusTimeline&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DeliveryStatusTimeline.wrn</code></p><pre data-language="wrn"><code>component DeliveryStatusTimeline &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/demo-request-form.wrn b/app/pages/components/demo-request-form.wrn
new file mode 100644
index 00000000..f5122fa9
--- /dev/null
+++ b/app/pages/components/demo-request-form.wrn
@@ -0,0 +1,34 @@
+page DemoRequestFormcomponent {
+  seo {
+    title = "DemoRequestForm component"
+    description = "Reusable demo request form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DemoRequestForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>DemoRequestForm</h1><p>Reusable demo request form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DemoRequestForm eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DemoRequestForm&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DemoRequestForm.wrn</code></p><pre data-language="wrn"><code>component DemoRequestForm &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/department-input.wrn b/app/pages/components/department-input.wrn
new file mode 100644
index 00000000..812bccc1
--- /dev/null
+++ b/app/pages/components/department-input.wrn
@@ -0,0 +1,37 @@
+page DepartmentInputcomponent {
+  seo {
+    title = "DepartmentInput component"
+    description = "Reusable department input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DepartmentInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>DepartmentInput</h1><p>Reusable department input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DepartmentInput label=&quot;Department&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DepartmentInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Department&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DepartmentInput.wrn</code></p><pre data-language="wrn"><code>component DepartmentInput &#123;
+  props &#123;
+    label = &quot;Department&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/deprecated-feature-alert.wrn b/app/pages/components/deprecated-feature-alert.wrn
new file mode 100644
index 00000000..fd113308
--- /dev/null
+++ b/app/pages/components/deprecated-feature-alert.wrn
@@ -0,0 +1,32 @@
+page DeprecatedFeatureAlertcomponent {
+  seo {
+    title = "DeprecatedFeatureAlert component"
+    description = "Reusable deprecated feature alert component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DeprecatedFeatureAlert</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>DeprecatedFeatureAlert</h1><p>Reusable deprecated feature alert component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DeprecatedFeatureAlert label=&quot;DeprecatedFeature&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DeprecatedFeatureAlert&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;DeprecatedFeature&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DeprecatedFeatureAlert.wrn</code></p><pre data-language="wrn"><code>component DeprecatedFeatureAlert &#123;
+  props &#123;
+    label = &quot;DeprecatedFeature&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/description-list.wrn b/app/pages/components/description-list.wrn
new file mode 100644
index 00000000..acf2bfce
--- /dev/null
+++ b/app/pages/components/description-list.wrn
@@ -0,0 +1,31 @@
+page DescriptionListcomponent {
+  seo {
+    title = "DescriptionList component"
+    description = "Reusable description list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DescriptionList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>DescriptionList</h1><p>Reusable description list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DescriptionList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DescriptionList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DescriptionList.wrn</code></p><pre data-language="wrn"><code>component DescriptionList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/desktop-navigation.wrn b/app/pages/components/desktop-navigation.wrn
new file mode 100644
index 00000000..764272c6
--- /dev/null
+++ b/app/pages/components/desktop-navigation.wrn
@@ -0,0 +1,29 @@
+page DesktopNavigationcomponent {
+  seo {
+    title = "DesktopNavigation component"
+    description = "Reusable desktop navigation component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DesktopNavigation</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>DesktopNavigation</h1><p>Reusable desktop navigation component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DesktopNavigation label=&quot;Primary navigation&quot; items=&quot;[]&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DesktopNavigation&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Primary navigation&quot;</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DesktopNavigation.wrn</code></p><pre data-language="wrn"><code>component DesktopNavigation &#123;
+  props &#123;
+    label = &quot;Primary navigation&quot;
+    items = []
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;nav aria-label=&quot;&#123;label&#125;&quot; class=&quot;wire-desktop-nav &#123;class&#125;&quot;&gt;&lt;ul&gt;&#123;#each items as item&#125;&lt;li&gt;&lt;a href=&quot;&#123;item.href&#125;&quot; aria-current=&quot;&#123;item.current ? 'page' : 'false'&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;&lt;/li&gt;&#123;/each&#125;&lt;/ul&gt;&lt;/nav&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/developer-cta.wrn b/app/pages/components/developer-cta.wrn
new file mode 100644
index 00000000..2b2912db
--- /dev/null
+++ b/app/pages/components/developer-cta.wrn
@@ -0,0 +1,32 @@
+page DeveloperCTAcomponent {
+  seo {
+    title = "DeveloperCTA component"
+    description = "Reusable developer c t a component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DeveloperCTA</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>DeveloperCTA</h1><p>Reusable developer c t a component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DeveloperCTA label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DeveloperCTA&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DeveloperCTA.wrn</code></p><pre data-language="wrn"><code>component DeveloperCTA &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/developer-hero.wrn b/app/pages/components/developer-hero.wrn
new file mode 100644
index 00000000..00d17c1f
--- /dev/null
+++ b/app/pages/components/developer-hero.wrn
@@ -0,0 +1,31 @@
+page DeveloperHerocomponent {
+  seo {
+    title = "DeveloperHero component"
+    description = "Reusable developer hero component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DeveloperHero</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>DeveloperHero</h1><p>Reusable developer hero component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DeveloperHero eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DeveloperHero&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DeveloperHero.wrn</code></p><pre data-language="wrn"><code>component DeveloperHero &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/developer-page-shell.wrn b/app/pages/components/developer-page-shell.wrn
new file mode 100644
index 00000000..0a676d65
--- /dev/null
+++ b/app/pages/components/developer-page-shell.wrn
@@ -0,0 +1,31 @@
+page DeveloperPageShellcomponent {
+  seo {
+    title = "DeveloperPageShell component"
+    description = "Reusable developer page shell component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DeveloperPageShell</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>DeveloperPageShell</h1><p>Reusable developer page shell component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DeveloperPageShell eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DeveloperPageShell&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DeveloperPageShell.wrn</code></p><pre data-language="wrn"><code>component DeveloperPageShell &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/developer-search.wrn b/app/pages/components/developer-search.wrn
new file mode 100644
index 00000000..99b931c3
--- /dev/null
+++ b/app/pages/components/developer-search.wrn
@@ -0,0 +1,34 @@
+page DeveloperSearchcomponent {
+  seo {
+    title = "DeveloperSearch component"
+    description = "Reusable developer search component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DeveloperSearch</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>DeveloperSearch</h1><p>Reusable developer search component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DeveloperSearch eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DeveloperSearch&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DeveloperSearch.wrn</code></p><pre data-language="wrn"><code>component DeveloperSearch &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/developers-mega-menu.wrn b/app/pages/components/developers-mega-menu.wrn
new file mode 100644
index 00000000..930be271
--- /dev/null
+++ b/app/pages/components/developers-mega-menu.wrn
@@ -0,0 +1,442 @@
+page DevelopersMegaMenucomponent {
+  seo {
+    title = "DevelopersMegaMenu component"
+    description = "Reusable developers mega menu component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DevelopersMegaMenu</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>DevelopersMegaMenu</h1><p>Reusable developers mega menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DevelopersMegaMenu /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DevelopersMegaMenu&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DevelopersMegaMenu.wrn</code></p><pre data-language="wrn"><code>component DevelopersMegaMenu &#123;
+    props &#123;
+        class: string = &quot;&quot;
+    &#125;
+    view &#123;
+        &lt;div
+            class=&quot;border-t border-slate-200 bg-white shadow-2xl shadow-slate-950/10 dark:border-white/10 dark:bg-slate-950 dark:shadow-black/30 &#123;class&#125;&quot;
+        &gt;
+            &lt;div class=&quot;mx-auto max-w-7xl px-6 py-8 lg:px-10&quot;&gt;
+                &lt;div class=&quot;grid gap-8 lg:grid-cols-[minmax(0,1.55fr)_minmax(18rem,0.8fr)]&quot;&gt;
+
+                    &lt;!-- Developer resources --&gt;
+                    &lt;section&gt;
+                        &lt;div class=&quot;mb-5 flex items-end justify-between gap-6&quot;&gt;
+                            &lt;div&gt;
+                                &lt;p class=&quot;text-xs font-semibold uppercase tracking-[0.16em] text-indigo-600 dark:text-indigo-400&quot;&gt;
+                                    Developers
+                                &lt;/p&gt;
+
+                                &lt;h2 class=&quot;mt-2 text-lg font-bold tracking-tight text-slate-950 dark:text-white&quot;&gt;
+                                    Build secure identity into any application
+                                &lt;/h2&gt;
+
+                                &lt;p class=&quot;mt-1 text-sm text-slate-500 dark:text-slate-400&quot;&gt;
+                                    Explore documentation, APIs, SDKs, examples, and tools built
+                                    for modern development teams.
+                                &lt;/p&gt;
+                            &lt;/div&gt;
+
+                            &lt;a
+                                href=&quot;/docs&quot;
+                                class=&quot;group hidden items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 xl:inline-flex&quot;
+                            &gt;
+                                Open documentation
+
+                                &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/a&gt;
+                        &lt;/div&gt;
+
+                        &lt;div class=&quot;grid gap-2 md:grid-cols-2&quot;&gt;
+
+                            &lt;!-- Documentation --&gt;
+                            &lt;a
+                                href=&quot;/docs&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-indigo-200 hover:bg-indigo-50 dark:hover:border-indigo-500/20 dark:hover:bg-indigo-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-indigo-100 text-indigo-700 transition group-hover:bg-indigo-600 group-hover:text-white dark:bg-indigo-500/15 dark:text-indigo-300 dark:group-hover:bg-indigo-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--book-open] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            Documentation
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-indigo-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-indigo-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Guides for authentication, users, organizations, and
+                                        authorization.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;!-- API reference --&gt;
+                            &lt;a
+                                href=&quot;/docs/api&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-violet-200 hover:bg-violet-50 dark:hover:border-violet-500/20 dark:hover:bg-violet-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-violet-100 text-violet-700 transition group-hover:bg-violet-600 group-hover:text-white dark:bg-violet-500/15 dark:text-violet-300 dark:group-hover:bg-violet-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--braces] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            API reference
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-violet-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-violet-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Complete endpoint, request, response, and error
+                                        documentation.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;!-- SDKs --&gt;
+                            &lt;a
+                                href=&quot;/sdks&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-cyan-200 hover:bg-cyan-50 dark:hover:border-cyan-500/20 dark:hover:bg-cyan-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-cyan-100 text-cyan-700 transition group-hover:bg-cyan-600 group-hover:text-white dark:bg-cyan-500/15 dark:text-cyan-300 dark:group-hover:bg-cyan-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--package] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            SDKs
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-cyan-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-cyan-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Official libraries for JavaScript, TypeScript, Go, Java,
+                                        Python, and more.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;!-- Examples --&gt;
+                            &lt;a
+                                href=&quot;/examples&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-emerald-200 hover:bg-emerald-50 dark:hover:border-emerald-500/20 dark:hover:bg-emerald-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-emerald-100 text-emerald-700 transition group-hover:bg-emerald-600 group-hover:text-white dark:bg-emerald-500/15 dark:text-emerald-300 dark:group-hover:bg-emerald-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--flask-conical] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            Examples
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-emerald-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-emerald-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Ready-to-run projects for common frameworks and identity
+                                        flows.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;!-- Webhooks --&gt;
+                            &lt;a
+                                href=&quot;/docs/webhooks&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-amber-200 hover:bg-amber-50 dark:hover:border-amber-500/20 dark:hover:bg-amber-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-amber-100 text-amber-700 transition group-hover:bg-amber-600 group-hover:text-white dark:bg-amber-500/15 dark:text-amber-300 dark:group-hover:bg-amber-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--webhook] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            Webhooks
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-amber-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-amber-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Respond to user, session, organization, and security events.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;!-- Changelog --&gt;
+                            &lt;a
+                                href=&quot;/changelog&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-rose-200 hover:bg-rose-50 dark:hover:border-rose-500/20 dark:hover:bg-rose-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-rose-100 text-rose-700 transition group-hover:bg-rose-600 group-hover:text-white dark:bg-rose-500/15 dark:text-rose-300 dark:group-hover:bg-rose-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--history] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            Changelog
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-rose-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-rose-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Review platform releases, improvements, and migration notes.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+                        &lt;/div&gt;
+
+                        &lt;a
+                            href=&quot;/docs&quot;
+                            class=&quot;mt-4 flex items-center justify-center gap-2 rounded-xl border border-indigo-200 bg-indigo-50 px-4 py-3 text-sm font-semibold text-indigo-700 transition hover:border-indigo-300 hover:bg-indigo-100 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/15 xl:hidden&quot;
+                        &gt;
+                            Open documentation
+
+                            &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                        &lt;/a&gt;
+                    &lt;/section&gt;
+
+                    &lt;!-- Developer toolkit --&gt;
+                    &lt;aside
+                        class=&quot;relative overflow-hidden rounded-3xl border border-indigo-200 bg-linear-to-br from-indigo-50 via-white to-violet-50 p-6 shadow-xl shadow-indigo-950/5 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10 dark:shadow-black/20&quot;
+                    &gt;
+                        &lt;!-- Decorative glow --&gt;
+                        &lt;div aria-hidden=&quot;true&quot; class=&quot;absolute -right-20 -top-20 h-48 w-48 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10&quot; &gt;&lt;/div&gt;
+
+                        &lt;div aria-hidden=&quot;true&quot; class=&quot;absolute -bottom-24 -left-20 h-48 w-48 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10&quot; &gt;&lt;/div&gt;
+
+                        &lt;div class=&quot;relative&quot;&gt;
+                            &lt;!-- Header --&gt;
+                            &lt;div class=&quot;flex items-center justify-between gap-4&quot;&gt;
+                                &lt;span
+                                    class=&quot;inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-white/80 px-3 py-1.5 text-xs font-semibold text-indigo-700 backdrop-blur-sm dark:border-indigo-500/20 dark:bg-white/5 dark:text-indigo-300&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--code-2] h-3.5 w-3.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                    Developer toolkit
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;inline-flex items-center gap-2 text-xs font-medium text-slate-500 dark:text-slate-400&quot;&gt;
+                                    &lt;span class=&quot;relative flex h-2 w-2&quot;&gt;
+                                        &lt;span class=&quot;absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60&quot;&gt;&lt;/span&gt;
+                                        &lt;span class=&quot;relative inline-flex h-2 w-2 rounded-full bg-emerald-500&quot;&gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    APIs operational
+                                &lt;/span&gt;
+                            &lt;/div&gt;
+
+                            &lt;!-- Intro --&gt;
+                            &lt;div
+                                class=&quot;mt-5 grid h-12 w-12 place-items-center rounded-2xl bg-indigo-600 text-white shadow-lg shadow-indigo-600/20&quot;
+                            &gt;
+                                &lt;span class=&quot;icon-[lucide--blocks] h-6 w-6&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/div&gt;
+
+                            &lt;h3 class=&quot;mt-5 text-xl font-bold tracking-tight text-slate-950 dark:text-white&quot;&gt;
+                                Everything developers need
+                            &lt;/h3&gt;
+
+                            &lt;p class=&quot;mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400&quot;&gt;
+                                Build, test, and ship secure identity flows with APIs, SDKs,
+                                examples, webhooks, and complete documentation.
+                            &lt;/p&gt;
+
+                            &lt;!-- Toolkit links --&gt;
+                            &lt;div class=&quot;mt-6 grid gap-3&quot;&gt;
+                                &lt;!-- Documentation --&gt;
+                                &lt;a
+                                    href=&quot;/docs&quot;
+                                    class=&quot;group flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white/80 px-4 py-3.5 transition hover:border-indigo-300 hover:bg-white hover:shadow-md dark:border-white/10 dark:bg-white/5 dark:hover:border-indigo-500/30 dark:hover:bg-white/10&quot;
+                                &gt;
+                                    &lt;span class=&quot;flex items-center gap-3&quot;&gt;
+                                        &lt;span
+                                            class=&quot;grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300&quot;
+                                        &gt;
+                                            &lt;span class=&quot;icon-[lucide--book-open] h-4.5 w-4.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                        &lt;/span&gt;
+
+                                        &lt;span&gt;
+                                            &lt;span class=&quot;block text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                                Documentation
+                                            &lt;/span&gt;
+
+                                            &lt;span class=&quot;mt-0.5 block text-xs text-slate-500 dark:text-slate-400&quot;&gt;
+                                                Guides and platform concepts
+                                            &lt;/span&gt;
+                                        &lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;icon-[lucide--arrow-up-right] h-4 w-4 shrink-0 text-slate-400 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-indigo-600 dark:group-hover:text-indigo-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/a&gt;
+
+                                &lt;!-- API reference --&gt;
+                                &lt;a
+                                    href=&quot;/docs/api&quot;
+                                    class=&quot;group flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white/80 px-4 py-3.5 transition hover:border-violet-300 hover:bg-white hover:shadow-md dark:border-white/10 dark:bg-white/5 dark:hover:border-violet-500/30 dark:hover:bg-white/10&quot;
+                                &gt;
+                                    &lt;span class=&quot;flex items-center gap-3&quot;&gt;
+                                        &lt;span
+                                            class=&quot;grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300&quot;
+                                        &gt;
+                                            &lt;span class=&quot;icon-[lucide--braces] h-4.5 w-4.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                        &lt;/span&gt;
+
+                                        &lt;span&gt;
+                                            &lt;span class=&quot;block text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                                API reference
+                                            &lt;/span&gt;
+
+                                            &lt;span class=&quot;mt-0.5 block text-xs text-slate-500 dark:text-slate-400&quot;&gt;
+                                                Endpoints, requests, and responses
+                                            &lt;/span&gt;
+                                        &lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;icon-[lucide--arrow-up-right] h-4 w-4 shrink-0 text-slate-400 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-violet-600 dark:group-hover:text-violet-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/a&gt;
+
+                                &lt;!-- SDKs --&gt;
+                                &lt;a
+                                    href=&quot;/sdks&quot;
+                                    class=&quot;group flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white/80 px-4 py-3.5 transition hover:border-cyan-300 hover:bg-white hover:shadow-md dark:border-white/10 dark:bg-white/5 dark:hover:border-cyan-500/30 dark:hover:bg-white/10&quot;
+                                &gt;
+                                    &lt;span class=&quot;flex items-center gap-3&quot;&gt;
+                                        &lt;span
+                                            class=&quot;grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-cyan-100 text-cyan-700 dark:bg-cyan-500/15 dark:text-cyan-300&quot;
+                                        &gt;
+                                            &lt;span class=&quot;icon-[lucide--package] h-4.5 w-4.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                        &lt;/span&gt;
+
+                                        &lt;span&gt;
+                                            &lt;span class=&quot;block text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                                Official SDKs
+                                            &lt;/span&gt;
+
+                                            &lt;span class=&quot;mt-0.5 block text-xs text-slate-500 dark:text-slate-400&quot;&gt;
+                                                Libraries for your preferred stack
+                                            &lt;/span&gt;
+                                        &lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;icon-[lucide--arrow-up-right] h-4 w-4 shrink-0 text-slate-400 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-cyan-600 dark:group-hover:text-cyan-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/a&gt;
+                            &lt;/div&gt;
+
+                            &lt;!-- Actions --&gt;
+                            &lt;div class=&quot;mt-6 grid grid-cols-2 gap-3&quot;&gt;
+                                &lt;a
+                                    href=&quot;/docs/quickstart&quot;
+                                    class=&quot;group flex h-11 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900&quot;
+                                &gt;
+                                    Start building
+
+                                    &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/a&gt;
+
+                                &lt;a
+                                    href=&quot;/examples&quot;
+                                    class=&quot;flex h-11 items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white/80 px-4 text-sm font-semibold text-slate-700 transition hover:border-indigo-300 hover:bg-white hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500/30 dark:hover:bg-white/10 dark:hover:text-indigo-300&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--flask-conical] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                    Examples
+                                &lt;/a&gt;
+                            &lt;/div&gt;
+                        &lt;/div&gt;
+                    &lt;/aside&gt;
+                &lt;/div&gt;
+
+                &lt;!-- Bottom developer links --&gt;
+                &lt;div
+                    class=&quot;mt-7 flex flex-wrap items-center justify-between gap-4 border-t border-slate-200 pt-5 dark:border-white/10&quot;
+                &gt;
+                    &lt;div class=&quot;flex flex-wrap items-center gap-x-6 gap-y-3&quot;&gt;
+                        &lt;a
+                            href=&quot;/docs/authentication&quot;
+                            class=&quot;inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300&quot;
+                        &gt;
+                            &lt;span class=&quot;icon-[lucide--fingerprint] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                            Authentication guides
+                        &lt;/a&gt;
+
+                        &lt;a
+                            href=&quot;/docs/organizations&quot;
+                            class=&quot;inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300&quot;
+                        &gt;
+                            &lt;span class=&quot;icon-[lucide--building-2] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                            Organizations
+                        &lt;/a&gt;
+
+                        &lt;a
+                            href=&quot;/docs/authorization&quot;
+                            class=&quot;inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300&quot;
+                        &gt;
+                            &lt;span class=&quot;icon-[lucide--shield-keyhole] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                            Authorization
+                        &lt;/a&gt;
+
+                        &lt;a
+                            href=&quot;/status&quot;
+                            class=&quot;inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300&quot;
+                        &gt;
+                            &lt;span class=&quot;relative flex h-2 w-2&quot;&gt;
+                                &lt;span class=&quot;absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60&quot;&gt;&lt;/span&gt;
+                                &lt;span class=&quot;relative inline-flex h-2 w-2 rounded-full bg-emerald-500&quot;&gt;&lt;/span&gt;
+                            &lt;/span&gt;
+
+                            System status
+                        &lt;/a&gt;
+                    &lt;/div&gt;
+
+                    &lt;a
+                        href=&quot;/support/developers&quot;
+                        class=&quot;group inline-flex items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300&quot;
+                    &gt;
+                        Developer support
+
+                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/a&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/developers-menu.wrn b/app/pages/components/developers-menu.wrn
new file mode 100644
index 00000000..d53b6a51
--- /dev/null
+++ b/app/pages/components/developers-menu.wrn
@@ -0,0 +1,31 @@
+page DevelopersMenucomponent {
+  seo {
+    title = "DevelopersMenu component"
+    description = "Reusable developers menu component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DevelopersMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>DevelopersMenu</h1><p>Reusable developers menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DevelopersMenu title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DevelopersMenu&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DevelopersMenu.wrn</code></p><pre data-language="wrn"><code>component DevelopersMenu &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/device-card.wrn b/app/pages/components/device-card.wrn
new file mode 100644
index 00000000..e526efe6
--- /dev/null
+++ b/app/pages/components/device-card.wrn
@@ -0,0 +1,34 @@
+page DeviceCardcomponent {
+  seo {
+    title = "DeviceCard component"
+    description = "Reusable device card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DeviceCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>DeviceCard</h1><p>Reusable device card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DeviceCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DeviceCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DeviceCard.wrn</code></p><pre data-language="wrn"><code>component DeviceCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/disclosure.wrn b/app/pages/components/disclosure.wrn
new file mode 100644
index 00000000..6bd0b906
--- /dev/null
+++ b/app/pages/components/disclosure.wrn
@@ -0,0 +1,34 @@
+page disclosurecomponent {
+  seo {
+    title = "disclosure component"
+    description = "Reusable disclosure component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">disclosure</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>disclosure</h1><p>Reusable disclosure component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>2 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;disclosure summary=&quot;Details&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;disclosure&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Details&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/disclosure.wrn</code></p><pre data-language="wrn"><code>// Expand/collapse section using native &lt;details&gt; (no JS).
+component Disclosure &#123;
+  props &#123;
+    summary = &quot;Details&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;details class=&quot;wire-disclosure &#123;class&#125;&quot;&gt;
+      &lt;summary class=&quot;wire-disclosure__summary&quot;&gt;&#123;summary&#125;&lt;/summary&gt;
+      &lt;div class=&quot;wire-disclosure__body&quot;&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/div&gt;
+    &lt;/details&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/discount-input.wrn b/app/pages/components/discount-input.wrn
new file mode 100644
index 00000000..44c9fe20
--- /dev/null
+++ b/app/pages/components/discount-input.wrn
@@ -0,0 +1,37 @@
+page DiscountInputcomponent {
+  seo {
+    title = "DiscountInput component"
+    description = "Reusable discount input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DiscountInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>DiscountInput</h1><p>Reusable discount input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DiscountInput label=&quot;Discount&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DiscountInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Discount&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DiscountInput.wrn</code></p><pre data-language="wrn"><code>component DiscountInput &#123;
+  props &#123;
+    label = &quot;Discount&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/display-heading.wrn b/app/pages/components/display-heading.wrn
new file mode 100644
index 00000000..6ef86695
--- /dev/null
+++ b/app/pages/components/display-heading.wrn
@@ -0,0 +1,29 @@
+page DisplayHeadingcomponent {
+  seo {
+    title = "DisplayHeading component"
+    description = "Reusable display heading component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DisplayHeading</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>DisplayHeading</h1><p>Reusable display heading component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DisplayHeading text=&quot;text&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DisplayHeading&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>text</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DisplayHeading.wrn</code></p><pre data-language="wrn"><code>component DisplayHeading &#123;
+  props &#123;
+    text = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-type wire-type--display wire-text--&#123;align&#125;  &#123;class&#125;&quot;&gt;&#123;text&#125;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/display-name-input.wrn b/app/pages/components/display-name-input.wrn
new file mode 100644
index 00000000..12c194c4
--- /dev/null
+++ b/app/pages/components/display-name-input.wrn
@@ -0,0 +1,37 @@
+page DisplayNameInputcomponent {
+  seo {
+    title = "DisplayNameInput component"
+    description = "Reusable display name input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DisplayNameInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>DisplayNameInput</h1><p>Reusable display name input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DisplayNameInput label=&quot;DisplayName&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DisplayNameInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;DisplayName&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DisplayNameInput.wrn</code></p><pre data-language="wrn"><code>component DisplayNameInput &#123;
+  props &#123;
+    label = &quot;DisplayName&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/divider.wrn b/app/pages/components/divider.wrn
new file mode 100644
index 00000000..a43050da
--- /dev/null
+++ b/app/pages/components/divider.wrn
@@ -0,0 +1,29 @@
+page Dividercomponent {
+  seo {
+    title = "Divider component"
+    description = "Reusable divider component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Divider</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Divider</h1><p>Reusable divider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Divider /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Divider&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>className</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Divider.wrn</code></p><pre data-language="wrn"><code>component Divider &#123;
+  props &#123;
+    className = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;h-px w-full bg-slate-200 dark:bg-slate-800 &#123;className&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/do-not-sell-link.wrn b/app/pages/components/do-not-sell-link.wrn
new file mode 100644
index 00000000..2ff0357f
--- /dev/null
+++ b/app/pages/components/do-not-sell-link.wrn
@@ -0,0 +1,32 @@
+page DoNotSellLinkcomponent {
+  seo {
+    title = "DoNotSellLink component"
+    description = "Reusable do not sell link component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DoNotSellLink</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>DoNotSellLink</h1><p>Reusable do not sell link component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DoNotSellLink label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DoNotSellLink&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DoNotSellLink.wrn</code></p><pre data-language="wrn"><code>component DoNotSellLink &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/document-preview.wrn b/app/pages/components/document-preview.wrn
new file mode 100644
index 00000000..8ba05033
--- /dev/null
+++ b/app/pages/components/document-preview.wrn
@@ -0,0 +1,34 @@
+page DocumentPreviewcomponent {
+  seo {
+    title = "DocumentPreview component"
+    description = "Reusable document preview component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DocumentPreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>DocumentPreview</h1><p>Reusable document preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DocumentPreview eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DocumentPreview&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DocumentPreview.wrn</code></p><pre data-language="wrn"><code>component DocumentPreview &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/document-upload.wrn b/app/pages/components/document-upload.wrn
new file mode 100644
index 00000000..d37a713c
--- /dev/null
+++ b/app/pages/components/document-upload.wrn
@@ -0,0 +1,34 @@
+page DocumentUploadcomponent {
+  seo {
+    title = "DocumentUpload component"
+    description = "Reusable document upload component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DocumentUpload</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>DocumentUpload</h1><p>Reusable document upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DocumentUpload eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DocumentUpload&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DocumentUpload.wrn</code></p><pre data-language="wrn"><code>component DocumentUpload &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/domain-input.wrn b/app/pages/components/domain-input.wrn
new file mode 100644
index 00000000..3d8799b1
--- /dev/null
+++ b/app/pages/components/domain-input.wrn
@@ -0,0 +1,37 @@
+page DomainInputcomponent {
+  seo {
+    title = "DomainInput component"
+    description = "Reusable domain input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DomainInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>DomainInput</h1><p>Reusable domain input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DomainInput label=&quot;Domain&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DomainInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Domain&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DomainInput.wrn</code></p><pre data-language="wrn"><code>component DomainInput &#123;
+  props &#123;
+    label = &quot;Domain&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/donut-chart.wrn b/app/pages/components/donut-chart.wrn
new file mode 100644
index 00000000..2a1ebeeb
--- /dev/null
+++ b/app/pages/components/donut-chart.wrn
@@ -0,0 +1,32 @@
+page DonutChartcomponent {
+  seo {
+    title = "DonutChart component"
+    description = "Reusable donut chart component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DonutChart</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>DonutChart</h1><p>Reusable donut chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DonutChart title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DonutChart&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DonutChart.wrn</code></p><pre data-language="wrn"><code>component DonutChart &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/download-action.wrn b/app/pages/components/download-action.wrn
new file mode 100644
index 00000000..0df72b8b
--- /dev/null
+++ b/app/pages/components/download-action.wrn
@@ -0,0 +1,32 @@
+page DownloadActioncomponent {
+  seo {
+    title = "DownloadAction component"
+    description = "Reusable download action component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DownloadAction</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>DownloadAction</h1><p>Reusable download action component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DownloadAction label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DownloadAction&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DownloadAction.wrn</code></p><pre data-language="wrn"><code>component DownloadAction &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/download-button.wrn b/app/pages/components/download-button.wrn
new file mode 100644
index 00000000..62fc2ae8
--- /dev/null
+++ b/app/pages/components/download-button.wrn
@@ -0,0 +1,30 @@
+page DownloadButtoncomponent {
+  seo {
+    title = "DownloadButton component"
+    description = "Reusable download button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DownloadButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>DownloadButton</h1><p>Reusable download button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DownloadButton label=&quot;Action&quot; type=&quot;button&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DownloadButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DownloadButton.wrn</code></p><pre data-language="wrn"><code>component DownloadButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    type = &quot;button&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;button type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--default &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/download-gate-form.wrn b/app/pages/components/download-gate-form.wrn
new file mode 100644
index 00000000..eb17ec50
--- /dev/null
+++ b/app/pages/components/download-gate-form.wrn
@@ -0,0 +1,34 @@
+page DownloadGateFormcomponent {
+  seo {
+    title = "DownloadGateForm component"
+    description = "Reusable download gate form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DownloadGateForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>DownloadGateForm</h1><p>Reusable download gate form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DownloadGateForm eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DownloadGateForm&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DownloadGateForm.wrn</code></p><pre data-language="wrn"><code>component DownloadGateForm &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/download-policy-button.wrn b/app/pages/components/download-policy-button.wrn
new file mode 100644
index 00000000..5ef58719
--- /dev/null
+++ b/app/pages/components/download-policy-button.wrn
@@ -0,0 +1,32 @@
+page DownloadPolicyButtoncomponent {
+  seo {
+    title = "DownloadPolicyButton component"
+    description = "Reusable download policy button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DownloadPolicyButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>DownloadPolicyButton</h1><p>Reusable download policy button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DownloadPolicyButton label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DownloadPolicyButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DownloadPolicyButton.wrn</code></p><pre data-language="wrn"><code>component DownloadPolicyButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/download-resource-form.wrn b/app/pages/components/download-resource-form.wrn
new file mode 100644
index 00000000..0f4fa892
--- /dev/null
+++ b/app/pages/components/download-resource-form.wrn
@@ -0,0 +1,34 @@
+page DownloadResourceFormcomponent {
+  seo {
+    title = "DownloadResourceForm component"
+    description = "Reusable download resource form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DownloadResourceForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>DownloadResourceForm</h1><p>Reusable download resource form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DownloadResourceForm eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DownloadResourceForm&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DownloadResourceForm.wrn</code></p><pre data-language="wrn"><code>component DownloadResourceForm &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/drawer.wrn b/app/pages/components/drawer.wrn
new file mode 100644
index 00000000..592ce321
--- /dev/null
+++ b/app/pages/components/drawer.wrn
@@ -0,0 +1,33 @@
+page Drawercomponent {
+  seo {
+    title = "Drawer component"
+    description = "Reusable drawer component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Drawer</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Drawer</h1><p>Reusable drawer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Drawer title=&quot;Panel&quot; open=&quot;false&quot; side=&quot;right&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Drawer&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Panel&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>side</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;right&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Drawer.wrn</code></p><pre data-language="wrn"><code>component Drawer &#123;
+  props &#123;
+    class = &quot;&quot;
+    title = &quot;Panel&quot;
+    open = false
+    side = &quot;right&quot;
+  &#125;
+  state visible = open
+  view &#123;
+    &lt;div data-show=&quot;visible&quot; class=&quot;fixed inset-0 z-50 &#123;class&#125;&quot; role=&quot;dialog&quot; aria-modal=&quot;true&quot;&gt;&lt;button class=&quot;absolute inset-0 bg-slate-950/50&quot; aria-label=&quot;Close&quot; @click=&quot;visible = false&quot;&gt;&lt;/button&gt;&lt;aside class=&quot;absolute inset-y-0 w-[min(92vw,28rem)] overflow-auto bg-white p-6 shadow-2xl transition dark:bg-slate-900 &#123;side === 'left' ? 'left-0' : 'right-0'&#125;&quot;&gt;&lt;header class=&quot;flex items-center justify-between&quot;&gt;&lt;h2 class=&quot;text-xl font-bold&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;button @click=&quot;visible = false&quot; class=&quot;size-10 rounded-xl hover:bg-slate-100&quot;&gt;×&lt;/button&gt;&lt;/header&gt;&lt;div class=&quot;mt-6&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;/aside&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/dropdown-menu.wrn b/app/pages/components/dropdown-menu.wrn
new file mode 100644
index 00000000..9cbe3673
--- /dev/null
+++ b/app/pages/components/dropdown-menu.wrn
@@ -0,0 +1,31 @@
+page DropdownMenucomponent {
+  seo {
+    title = "DropdownMenu component"
+    description = "Reusable dropdown menu component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DropdownMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>DropdownMenu</h1><p>Reusable dropdown menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>2 props</span><span>1 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DropdownMenu label=&quot;Menu&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DropdownMenu&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Menu&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DropdownMenu.wrn</code></p><pre data-language="wrn"><code>component DropdownMenu &#123;
+  props &#123;
+    class = &quot;&quot;
+    label = &quot;Menu&quot;
+  &#125;
+  state open = false
+  view &#123;
+    &lt;div class=&quot;relative inline-block &#123;class&#125;&quot;&gt;&lt;button type=&quot;button&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;&#123;open&#125;&quot; @click=&quot;open = !open&quot; class=&quot;inline-flex min-h-11 items-center gap-2 rounded-xl border border-slate-300 px-4 text-sm font-semibold dark:border-slate-700&quot;&gt;&#123;label&#125;&lt;span aria-hidden=&quot;true&quot;&gt;⌄&lt;/span&gt;&lt;/button&gt;&lt;div data-show=&quot;open&quot; role=&quot;menu&quot; class=&quot;absolute right-0 z-30 mt-2 min-w-48 rounded-xl border border-slate-200 bg-white p-1.5 shadow-xl dark:border-slate-800 dark:bg-slate-900&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/dropdown-navigation.wrn b/app/pages/components/dropdown-navigation.wrn
new file mode 100644
index 00000000..0c637c69
--- /dev/null
+++ b/app/pages/components/dropdown-navigation.wrn
@@ -0,0 +1,31 @@
+page DropdownNavigationcomponent {
+  seo {
+    title = "DropdownNavigation component"
+    description = "Reusable dropdown navigation component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DropdownNavigation</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>DropdownNavigation</h1><p>Reusable dropdown navigation component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DropdownNavigation eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DropdownNavigation&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DropdownNavigation.wrn</code></p><pre data-language="wrn"><code>component DropdownNavigation &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/duration-input.wrn b/app/pages/components/duration-input.wrn
new file mode 100644
index 00000000..5f73fae3
--- /dev/null
+++ b/app/pages/components/duration-input.wrn
@@ -0,0 +1,37 @@
+page DurationInputcomponent {
+  seo {
+    title = "DurationInput component"
+    description = "Reusable duration input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DurationInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>DurationInput</h1><p>Reusable duration input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DurationInput label=&quot;Duration&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DurationInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Duration&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DurationInput.wrn</code></p><pre data-language="wrn"><code>component DurationInput &#123;
+  props &#123;
+    label = &quot;Duration&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/duration-picker.wrn b/app/pages/components/duration-picker.wrn
new file mode 100644
index 00000000..b0d1668e
--- /dev/null
+++ b/app/pages/components/duration-picker.wrn
@@ -0,0 +1,37 @@
+page DurationPickercomponent {
+  seo {
+    title = "DurationPicker component"
+    description = "Reusable duration picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DurationPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>DurationPicker</h1><p>Reusable duration picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DurationPicker label=&quot;Duration&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DurationPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Duration&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DurationPicker.wrn</code></p><pre data-language="wrn"><code>component DurationPicker &#123;
+  props &#123;
+    label = &quot;Duration&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/duration-slider.wrn b/app/pages/components/duration-slider.wrn
new file mode 100644
index 00000000..9ed75c6b
--- /dev/null
+++ b/app/pages/components/duration-slider.wrn
@@ -0,0 +1,34 @@
+page DurationSlidercomponent {
+  seo {
+    title = "DurationSlider component"
+    description = "Reusable duration slider component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DurationSlider</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>DurationSlider</h1><p>Reusable duration slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DurationSlider eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DurationSlider&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DurationSlider.wrn</code></p><pre data-language="wrn"><code>component DurationSlider &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/elevated-card.wrn b/app/pages/components/elevated-card.wrn
new file mode 100644
index 00000000..eebd808f
--- /dev/null
+++ b/app/pages/components/elevated-card.wrn
@@ -0,0 +1,30 @@
+page ElevatedCardcomponent {
+  seo {
+    title = "ElevatedCard component"
+    description = "Reusable elevated card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ElevatedCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ElevatedCard</h1><p>Reusable elevated card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ElevatedCard title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ElevatedCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ElevatedCard.wrn</code></p><pre data-language="wrn"><code>component ElevatedCard &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card wire-catalog-card--elevated &#123;class&#125;&quot;&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-catalog-card__link&quot;&gt;&lt;span class=&quot;wire-visually-hidden&quot;&gt;Open &#123;title&#125;&lt;/span&gt;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/email-body-editor.wrn b/app/pages/components/email-body-editor.wrn
new file mode 100644
index 00000000..3e6366cb
--- /dev/null
+++ b/app/pages/components/email-body-editor.wrn
@@ -0,0 +1,37 @@
+page EmailBodyEditorcomponent {
+  seo {
+    title = "EmailBodyEditor component"
+    description = "Reusable email body editor component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">EmailBodyEditor</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>EmailBodyEditor</h1><p>Reusable email body editor component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;EmailBodyEditor label=&quot;EmailBody&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;EmailBodyEditor&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;EmailBody&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/EmailBodyEditor.wrn</code></p><pre data-language="wrn"><code>component EmailBodyEditor &#123;
+  props &#123;
+    label = &quot;EmailBody&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/email-composer.wrn b/app/pages/components/email-composer.wrn
new file mode 100644
index 00000000..97e7d8fc
--- /dev/null
+++ b/app/pages/components/email-composer.wrn
@@ -0,0 +1,34 @@
+page EmailComposercomponent {
+  seo {
+    title = "EmailComposer component"
+    description = "Reusable email composer component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">EmailComposer</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>EmailComposer</h1><p>Reusable email composer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;EmailComposer eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;EmailComposer&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/EmailComposer.wrn</code></p><pre data-language="wrn"><code>component EmailComposer &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/email-input.wrn b/app/pages/components/email-input.wrn
new file mode 100644
index 00000000..f890d3f2
--- /dev/null
+++ b/app/pages/components/email-input.wrn
@@ -0,0 +1,45 @@
+page EmailInputcomponent {
+  seo {
+    title = "EmailInput component"
+    description = "Reusable email input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">EmailInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>EmailInput</h1><p>Reusable email input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>12 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;EmailInput id=&quot;id&quot; name=&quot;name&quot; label=&quot;Email&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;EmailInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Email&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>autocomplete</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/EmailInput.wrn</code></p><pre data-language="wrn"><code>component EmailInput &#123;
+  props &#123;
+    class = &quot;&quot;
+    id = &quot;&quot;
+    name = &quot;&quot;
+    label = &quot;Email&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    help = &quot;&quot;
+    error = &quot;&quot;
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;space-y-2 &#123;class&#125;&quot;&gt;
+      &lt;label for=&quot;&#123;id&#125;&quot; class=&quot;block text-sm font-semibold text-slate-800 dark:text-slate-200&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;ml-1 text-red-500&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
+      &lt;input id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; type=&quot;email&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; autocomplete=&quot;&#123;autocomplete&#125;&quot; aria-invalid=&quot;&#123;!!error&#125;&quot; aria-describedby=&quot;&#123;id&#125;-help &#123;id&#125;-error&quot; class=&quot;min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white &#123;error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'&#125;&quot; /&gt;
+      &lt;p id=&quot;&#123;id&#125;-help&quot; data-show=&quot;help &amp;&amp; !error&quot; class=&quot;text-sm text-slate-500 dark:text-slate-400&quot;&gt;&#123;help&#125;&lt;/p&gt;
+      &lt;p id=&quot;&#123;id&#125;-error&quot; data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;text-sm font-medium text-red-600 dark:text-red-400&quot;&gt;&#123;error&#125;&lt;/p&gt;
+    &lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/emoji-picker.wrn b/app/pages/components/emoji-picker.wrn
new file mode 100644
index 00000000..97167a4a
--- /dev/null
+++ b/app/pages/components/emoji-picker.wrn
@@ -0,0 +1,37 @@
+page EmojiPickercomponent {
+  seo {
+    title = "EmojiPicker component"
+    description = "Reusable emoji picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">EmojiPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>EmojiPicker</h1><p>Reusable emoji picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;EmojiPicker label=&quot;Emoji&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;EmojiPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Emoji&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/EmojiPicker.wrn</code></p><pre data-language="wrn"><code>component EmojiPicker &#123;
+  props &#123;
+    label = &quot;Emoji&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/empty-state.wrn b/app/pages/components/empty-state.wrn
new file mode 100644
index 00000000..158abb29
--- /dev/null
+++ b/app/pages/components/empty-state.wrn
@@ -0,0 +1,188 @@
+page EmptyStatecomponent {
+  seo {
+    title = "EmptyState component"
+    description = "Reusable empty state component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">EmptyState</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>EmptyState</h1><p>Reusable empty state component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>12 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;EmptyState eyebrow=&quot;eyebrow&quot; title=&quot;Nothing found&quot; description=&quot;description&quot; iconClass=&quot;icon-[lucide--inbox]&quot; primaryLabel=&quot;primaryLabel&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;EmptyState&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Nothing found&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>iconClass</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;icon-[lucide--inbox]&quot;</code></td></tr><tr><td><code>primaryLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>primaryHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>secondaryLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>secondaryHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>compact</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>centered</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>suggestions</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/EmptyState.wrn</code></p><pre data-language="wrn"><code>component EmptyState &#123;
+    props &#123;
+        class: string = &quot;&quot;
+        eyebrow = &quot;&quot;
+        title = &quot;Nothing found&quot;
+        description = &quot;&quot;
+
+        iconClass = &quot;icon-[lucide--inbox]&quot;
+
+        primaryLabel = &quot;&quot;
+        primaryHref = &quot;&quot;
+
+        secondaryLabel = &quot;&quot;
+        secondaryHref = &quot;&quot;
+
+        compact = false
+        centered = true
+
+        suggestions = []
+    &#125;
+
+    view &#123;
+        &lt;section
+            aria-labelledby=&quot;empty-state-title&quot;
+            class=&quot;w-full &#123;class&#125;&quot;
+            class:py-6=&quot;compact&quot;
+            class:sm:py-8=&quot;compact&quot;
+            class:py-8=&quot;!compact&quot;
+            class:sm:py-10=&quot;!compact&quot;
+        &gt;
+            &lt;div
+                class=&quot; relative mx-auto w-full overflow-hidden rounded-3xl border border-indigo-200/80 bg-linear-to-br from-indigo-50/90 via-white to-violet-50/80 shadow-xl shadow-indigo-950/5 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10 dark:shadow-black/20 &quot;
+                class:max-w-3xl=&quot;centered&quot;
+            &gt;
+                &lt;!-- Background decoration --&gt;
+                &lt;div
+                    aria-hidden=&quot;true&quot;
+                    class=&quot;pointer-events-none absolute inset-0 overflow-hidden&quot;
+                &gt;
+                    &lt;div class=&quot;absolute -right-20 -top-24 h-56 w-56 rounded-full bg-indigo-200/30 blur-3xl dark:bg-indigo-500/10&quot;&gt;&lt;/div&gt;
+
+                    &lt;div class=&quot;absolute -bottom-24 -left-20 h-56 w-56 rounded-full bg-violet-200/20 blur-3xl dark:bg-violet-500/5&quot;&gt;&lt;/div&gt;
+
+                    &lt;div class=&quot;absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-indigo-300/70 to-transparent dark:via-indigo-500/20&quot;&gt;&lt;/div&gt;
+                &lt;/div&gt;
+
+                &lt;div
+                    class=&quot;relative&quot;
+                    class:px-6=&quot;compact&quot;
+                    class:py-8=&quot;compact&quot;
+                    class:sm:px-8=&quot;compact&quot;
+                    class:sm:py-9=&quot;compact&quot;
+                    class:px-6=&quot;!compact&quot;
+                    class:py-10=&quot;!compact&quot;
+                    class:sm:px-10=&quot;!compact&quot;
+                    class:sm:py-12=&quot;!compact&quot;
+                    class:lg:px-12=&quot;!compact&quot;
+                    class:text-center=&quot;centered&quot;
+                &gt;
+                    &lt;div
+                        class=&quot; &#123;compact ? 'max-w-xl' : 'max-w-2xl'&#125; &#123;centered ? 'mx-auto' : 'mr-auto'&#125; &quot;
+                        class:max-w-xl=&quot;compact&quot;
+                        class:max-w-2xl=&quot;!compact&quot;
+                    &gt;
+                        &lt;!-- Icon --&gt;
+                        &lt;div
+                            class=&quot;flex&quot;
+                            class:justify-center=&quot;centered&quot;
+                        &gt;
+                            &lt;span
+                                class=&quot;grid place-items-center rounded-2xl bg-indigo-50 text-indigo-600 ring-1 ring-inset ring-indigo-200 dark:bg-indigo-500/10 dark:text-indigo-300 dark:ring-indigo-500/20&quot;
+                                class:h-12=&quot;compact&quot;
+                                class:w-12=&quot;compact&quot;
+                                class:h-14=&quot;!compact&quot;
+                                class:w-14=&quot;!compact&quot;
+                            &gt;
+                                &lt;span class=&quot;&#123;iconClass&#125;&quot; class:h-5=&quot;compact&quot; class:w-5=&quot;compact&quot; class:h-6=&quot;!compact&quot; class:w-6=&quot;!compact&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/span&gt;
+                        &lt;/div&gt;
+
+                        &lt;!-- Eyebrow --&gt;
+                        &lt;p
+                            class=&quot;mt-5 text-xs font-bold uppercase tracking-[0.18em] text-indigo-600 dark:text-indigo-400&quot;
+                            class:hidden=&quot;eyebrow === ''&quot;
+                        &gt;
+                            &#123;eyebrow&#125;
+                        &lt;/p&gt;
+
+                        &lt;!-- Title --&gt;
+                        &lt;h2
+                            id=&quot;empty-state-title&quot;
+                            class=&quot;font-bold tracking-tight text-slate-950 dark:text-white&quot;
+                            class:mt-5=&quot;eyebrow === ''&quot;
+                            class:mt-3=&quot;eyebrow !== ''&quot;
+                            class:text-xl=&quot;compact&quot;
+                            class:leading-tight=&quot;compact&quot;
+                            class:sm:text-2xl=&quot;compact&quot;
+                            class:text-2xl=&quot;!compact&quot;
+                            class:leading-tight=&quot;!compact&quot;
+                            class:sm:text-3xl=&quot;!compact&quot;
+                            class:lg:text-[2rem]=&quot;!compact&quot;
+                        &gt;
+                            &#123;title&#125;
+                        &lt;/h2&gt;
+
+                        &lt;!-- Description --&gt;
+                        &lt;p
+                            class=&quot;mx-auto mt-3 max-w-xl text-sm leading-6 text-slate-600 dark:text-slate-400&quot;
+                            class:hidden=&quot;description === ''&quot;
+                            class:sm:text-base=&quot;!compact&quot;
+                            class:sm:leading-7=&quot;!compact&quot;
+                        &gt;
+                            &#123;description&#125;
+                        &lt;/p&gt;
+
+                        &lt;!-- Suggestions --&gt;
+                        &lt;div
+                            class=&quot;mt-6 flex flex-wrap gap-2&quot;
+                            class:hidden=&quot;suggestions.length === 0&quot;
+                            class:justify-center=&quot;centered&quot;
+                        &gt;
+                            &#123;#each suggestions.slice(0, 4) as suggestion&#125;
+                            &lt;a
+                                href=&quot;&#123;suggestion.href&#125;&quot;
+                                class=&quot;inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-600 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-indigo-50 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-300&quot;
+                            &gt;
+                                &lt;span class=&quot;&#123;suggestion.iconClass&#125; h-3.5 w-3.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                &#123;suggestion.label&#125;
+                            &lt;/a&gt;
+                            &#123;/each&#125;
+                        &lt;/div&gt;
+
+                        &lt;!-- Actions --&gt;
+                        &lt;div
+                            class=&quot;flex flex-col gap-3 sm:flex-row&quot;
+                            class:mt-7=&quot;suggestions.length === 0&quot;
+                            class:mt-6=&quot;suggestions.length &gt; 0&quot;
+                            class:hidden=&quot;primaryLabel === '' &amp;&amp; secondaryLabel === ''&quot;
+                            class:justify-center=&quot;centered&quot;
+                        &gt;
+                            &lt;a
+                                href=&quot;&#123;secondaryHref&#125;&quot;
+                                class=&quot;h-11 items-center justify-center rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-slate-50 hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500/30 dark:hover:bg-white/10 dark:hover:text-indigo-300&quot;
+                                class:hidden=&quot;secondaryLabel === ''&quot;
+                                class:inline-flex=&quot;secondaryLabel !== ''&quot;
+                            &gt;
+                                &#123;secondaryLabel&#125;
+                            &lt;/a&gt;
+
+                            &lt;a
+                                href=&quot;&#123;primaryHref&#125;&quot;
+                                class=&quot;group h-11 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900&quot;
+                                class:hidden=&quot;primaryLabel === ''&quot;
+                                class:inline-flex=&quot;primaryLabel !== ''&quot;
+                            &gt;
+                                &#123;primaryLabel&#125;
+
+                                &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/a&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/section&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/encryption-diagram.wrn b/app/pages/components/encryption-diagram.wrn
new file mode 100644
index 00000000..45ed38a2
--- /dev/null
+++ b/app/pages/components/encryption-diagram.wrn
@@ -0,0 +1,32 @@
+page EncryptionDiagramcomponent {
+  seo {
+    title = "EncryptionDiagram component"
+    description = "Reusable encryption diagram component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">EncryptionDiagram</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>EncryptionDiagram</h1><p>Reusable encryption diagram component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;EncryptionDiagram title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;EncryptionDiagram&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/EncryptionDiagram.wrn</code></p><pre data-language="wrn"><code>component EncryptionDiagram &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/enterprise-cta.wrn b/app/pages/components/enterprise-cta.wrn
new file mode 100644
index 00000000..b297d54c
--- /dev/null
+++ b/app/pages/components/enterprise-cta.wrn
@@ -0,0 +1,32 @@
+page EnterpriseCTAcomponent {
+  seo {
+    title = "EnterpriseCTA component"
+    description = "Reusable enterprise c t a component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">EnterpriseCTA</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>EnterpriseCTA</h1><p>Reusable enterprise c t a component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;EnterpriseCTA label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;EnterpriseCTA&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/EnterpriseCTA.wrn</code></p><pre data-language="wrn"><code>component EnterpriseCTA &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/enterprise-hero.wrn b/app/pages/components/enterprise-hero.wrn
new file mode 100644
index 00000000..f05833af
--- /dev/null
+++ b/app/pages/components/enterprise-hero.wrn
@@ -0,0 +1,31 @@
+page EnterpriseHerocomponent {
+  seo {
+    title = "EnterpriseHero component"
+    description = "Reusable enterprise hero component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">EnterpriseHero</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>EnterpriseHero</h1><p>Reusable enterprise hero component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;EnterpriseHero eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;EnterpriseHero&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/EnterpriseHero.wrn</code></p><pre data-language="wrn"><code>component EnterpriseHero &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/enterprise-pricing-card.wrn b/app/pages/components/enterprise-pricing-card.wrn
new file mode 100644
index 00000000..a675fce6
--- /dev/null
+++ b/app/pages/components/enterprise-pricing-card.wrn
@@ -0,0 +1,34 @@
+page EnterprisePricingCardcomponent {
+  seo {
+    title = "EnterprisePricingCard component"
+    description = "Reusable enterprise pricing card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">EnterprisePricingCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>EnterprisePricingCard</h1><p>Reusable enterprise pricing card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;EnterprisePricingCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;EnterprisePricingCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/EnterprisePricingCard.wrn</code></p><pre data-language="wrn"><code>component EnterprisePricingCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/environment-selector.wrn b/app/pages/components/environment-selector.wrn
new file mode 100644
index 00000000..f3694aec
--- /dev/null
+++ b/app/pages/components/environment-selector.wrn
@@ -0,0 +1,37 @@
+page EnvironmentSelectorcomponent {
+  seo {
+    title = "EnvironmentSelector component"
+    description = "Reusable environment selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">EnvironmentSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>EnvironmentSelector</h1><p>Reusable environment selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;EnvironmentSelector label=&quot;Environment&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;EnvironmentSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Environment&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/EnvironmentSelector.wrn</code></p><pre data-language="wrn"><code>component EnvironmentSelector &#123;
+  props &#123;
+    label = &quot;Environment&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/environment-switcher.wrn b/app/pages/components/environment-switcher.wrn
new file mode 100644
index 00000000..dcd1d07d
--- /dev/null
+++ b/app/pages/components/environment-switcher.wrn
@@ -0,0 +1,34 @@
+page EnvironmentSwitchercomponent {
+  seo {
+    title = "EnvironmentSwitcher component"
+    description = "Reusable environment switcher component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">EnvironmentSwitcher</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>EnvironmentSwitcher</h1><p>Reusable environment switcher component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;EnvironmentSwitcher eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;EnvironmentSwitcher&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/EnvironmentSwitcher.wrn</code></p><pre data-language="wrn"><code>component EnvironmentSwitcher &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/error-actions.wrn b/app/pages/components/error-actions.wrn
new file mode 100644
index 00000000..49cc8a26
--- /dev/null
+++ b/app/pages/components/error-actions.wrn
@@ -0,0 +1,32 @@
+page ErrorActionscomponent {
+  seo {
+    title = "ErrorActions component"
+    description = "Reusable error actions component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ErrorActions</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>ErrorActions</h1><p>Reusable error actions component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ErrorActions label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ErrorActions&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ErrorActions.wrn</code></p><pre data-language="wrn"><code>component ErrorActions &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/error-card.wrn b/app/pages/components/error-card.wrn
new file mode 100644
index 00000000..a2d56956
--- /dev/null
+++ b/app/pages/components/error-card.wrn
@@ -0,0 +1,30 @@
+page ErrorCardcomponent {
+  seo {
+    title = "ErrorCard component"
+    description = "Reusable error card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ErrorCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ErrorCard</h1><p>Reusable error card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ErrorCard title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ErrorCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ErrorCard.wrn</code></p><pre data-language="wrn"><code>component ErrorCard &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card wire-catalog-card--error &#123;class&#125;&quot;&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-catalog-card__link&quot;&gt;&lt;span class=&quot;wire-visually-hidden&quot;&gt;Open &#123;title&#125;&lt;/span&gt;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/error-code.wrn b/app/pages/components/error-code.wrn
new file mode 100644
index 00000000..07df63ce
--- /dev/null
+++ b/app/pages/components/error-code.wrn
@@ -0,0 +1,34 @@
+page ErrorCodecomponent {
+  seo {
+    title = "ErrorCode component"
+    description = "Reusable error code component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ErrorCode</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ErrorCode</h1><p>Reusable error code component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ErrorCode eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ErrorCode&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ErrorCode.wrn</code></p><pre data-language="wrn"><code>component ErrorCode &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/error-hero.wrn b/app/pages/components/error-hero.wrn
new file mode 100644
index 00000000..bfe044e9
--- /dev/null
+++ b/app/pages/components/error-hero.wrn
@@ -0,0 +1,31 @@
+page ErrorHerocomponent {
+  seo {
+    title = "ErrorHero component"
+    description = "Reusable error hero component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ErrorHero</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ErrorHero</h1><p>Reusable error hero component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ErrorHero eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ErrorHero&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ErrorHero.wrn</code></p><pre data-language="wrn"><code>component ErrorHero &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/error-illustration.wrn b/app/pages/components/error-illustration.wrn
new file mode 100644
index 00000000..c860d345
--- /dev/null
+++ b/app/pages/components/error-illustration.wrn
@@ -0,0 +1,34 @@
+page ErrorIllustrationcomponent {
+  seo {
+    title = "ErrorIllustration component"
+    description = "Reusable error illustration component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ErrorIllustration</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ErrorIllustration</h1><p>Reusable error illustration component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ErrorIllustration eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ErrorIllustration&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ErrorIllustration.wrn</code></p><pre data-language="wrn"><code>component ErrorIllustration &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/error-page-shell.wrn b/app/pages/components/error-page-shell.wrn
new file mode 100644
index 00000000..2aaac3c2
--- /dev/null
+++ b/app/pages/components/error-page-shell.wrn
@@ -0,0 +1,31 @@
+page ErrorPageShellcomponent {
+  seo {
+    title = "ErrorPageShell component"
+    description = "Reusable error page shell component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ErrorPageShell</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ErrorPageShell</h1><p>Reusable error page shell component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ErrorPageShell eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ErrorPageShell&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ErrorPageShell.wrn</code></p><pre data-language="wrn"><code>component ErrorPageShell &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/error-page.wrn b/app/pages/components/error-page.wrn
new file mode 100644
index 00000000..10dc84a8
--- /dev/null
+++ b/app/pages/components/error-page.wrn
@@ -0,0 +1,34 @@
+page ErrorPagecomponent {
+  seo {
+    title = "ErrorPage component"
+    description = "Reusable error page component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ErrorPage</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ErrorPage</h1><p>Reusable error page component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ErrorPage eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ErrorPage&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ErrorPage.wrn</code></p><pre data-language="wrn"><code>component ErrorPage &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/error-state.wrn b/app/pages/components/error-state.wrn
new file mode 100644
index 00000000..9569b561
--- /dev/null
+++ b/app/pages/components/error-state.wrn
@@ -0,0 +1,214 @@
+page ErrorStatecomponent {
+  seo {
+    title = "ErrorState component"
+    description = "Reusable error state component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ErrorState</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>ErrorState</h1><p>Reusable error state component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>16 props</span><span>0 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ErrorState type=&quot;error&quot; eyebrow=&quot;eyebrow&quot; title=&quot;Something went wrong&quot; description=&quot;description&quot; errorCode=&quot;errorCode&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ErrorState&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;error&quot;</code></td></tr><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Something went wrong&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>errorCode</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>iconClass</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>primaryLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>primaryHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>secondaryLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>secondaryHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>retryLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>retryAction</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>centered</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>compact</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>details</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ErrorState.wrn</code></p><pre data-language="wrn"><code>component ErrorState &#123;
+    props &#123;
+        class: string = &quot;&quot;
+        type = &quot;error&quot;
+
+        eyebrow = &quot;&quot;
+        title = &quot;Something went wrong&quot;
+        description = &quot;&quot;
+
+        errorCode = &quot;&quot;
+
+        iconClass = &quot;&quot;
+
+        primaryLabel = &quot;&quot;
+        primaryHref = &quot;&quot;
+
+        secondaryLabel = &quot;&quot;
+        secondaryHref = &quot;&quot;
+
+        retryLabel = &quot;&quot;
+        retryAction = &quot;&quot;
+
+        centered = true
+        compact = false
+
+        details = []
+    &#125;
+
+    view &#123;
+        &lt;section
+            aria-labelledby=&quot;error-state-title&quot;
+            role=&quot;&#123;type === 'error' ? 'alert' : 'status'&#125;&quot;
+            class=&quot;w-full &#123;class&#125;&quot;
+            class:py-6=&quot;compact&quot;
+            class:sm:py-8=&quot;compact&quot;
+            class:py-8=&quot;!compact&quot;
+            class:sm:py-10=&quot;!compact&quot;
+        &gt;
+            &lt;div
+                class=&quot; relative w-full overflow-hidden rounded-3xl border shadow-xl &#123;type === 'warning' ? 'border-amber-200/80 bg-linear-to-br from-amber-50 via-white to-orange-50 shadow-amber-950/5 dark:border-amber-500/20 dark:from-amber-500/10 dark:via-slate-900 dark:to-orange-500/10' : type === 'forbidden' ? 'border-violet-200/80 bg-linear-to-br from-violet-50 via-white to-indigo-50 shadow-violet-950/5 dark:border-violet-500/20 dark:from-violet-500/10 dark:via-slate-900 dark:to-indigo-500/10' : type === 'offline' ? 'border-slate-200 bg-linear-to-br from-slate-100 via-white to-indigo-50 shadow-slate-950/5 dark:border-white/10 dark:from-white/5 dark:via-slate-900 dark:to-indigo-500/10' : 'border-rose-200/80 bg-linear-to-br from-rose-50 via-white to-orange-50 shadow-rose-950/5 dark:border-rose-500/20 dark:from-rose-500/10 dark:via-slate-900 dark:to-orange-500/10' &#125; &quot;
+                class:mx-auto=&quot;centered&quot;
+                class:max-w-3xl=&quot;centered&quot;
+            &gt;
+                &lt;!-- Decorative background --&gt;
+                &lt;div
+                    aria-hidden=&quot;true&quot;
+                    class=&quot;pointer-events-none absolute inset-0 overflow-hidden&quot;
+                &gt;
+                    &lt;div class=&quot; absolute -right-20 -top-24 h-64 w-64 rounded-full blur-3xl &#123;type === 'warning' ? 'bg-amber-300/25 dark:bg-amber-500/10' : type === 'forbidden' ? 'bg-violet-300/25 dark:bg-violet-500/10' : type === 'offline' ? 'bg-slate-300/25 dark:bg-slate-500/10' : 'bg-rose-300/25 dark:bg-rose-500/10' &#125; &quot; &gt;&lt;/div&gt;
+
+                    &lt;div class=&quot; absolute -bottom-28 -left-20 h-64 w-64 rounded-full blur-3xl &#123;type === 'warning' ? 'bg-orange-300/20 dark:bg-orange-500/10' : type === 'forbidden' ? 'bg-indigo-300/20 dark:bg-indigo-500/10' : type === 'offline' ? 'bg-indigo-300/15 dark:bg-indigo-500/5' : 'bg-orange-300/20 dark:bg-orange-500/10' &#125; &quot; &gt;&lt;/div&gt;
+
+                    &lt;div class=&quot; absolute left-1/2 top-0 h-px w-2/3 -translate-x-1/2 bg-linear-to-r from-transparent to-transparent &#123;type === 'warning' ? 'via-amber-400/60 dark:via-amber-400/20' : type === 'forbidden' ? 'via-violet-400/60 dark:via-violet-400/20' : type === 'offline' ? 'via-slate-400/50 dark:via-slate-400/20' : 'via-rose-400/60 dark:via-rose-400/20' &#125; &quot; &gt;&lt;/div&gt;
+                &lt;/div&gt;
+
+                &lt;div
+                    class=&quot;relative&quot;
+                    class:px-6=&quot;compact&quot;
+                    class:py-8=&quot;compact&quot;
+                    class:sm:px-8=&quot;compact&quot;
+                    class:sm:py-9=&quot;compact&quot;
+                    class:px-6=&quot;!compact&quot;
+                    class:py-10=&quot;!compact&quot;
+                    class:sm:px-10=&quot;!compact&quot;
+                    class:sm:py-12=&quot;!compact&quot;
+                    class:lg:px-12=&quot;!compact&quot;
+                    class:text-center=&quot;centered&quot;
+                    class:text-left=&quot;!centered&quot;
+                &gt;
+                    &lt;div class=&quot;&#123;compact ? 'max-w-xl' : 'max-w-2xl'&#125; &#123;centered ? 'mx-auto' : 'mr-auto'&#125;&quot; &gt;
+                        &lt;!-- Icon --&gt;
+                        &lt;div
+                            class=&quot;flex&quot;
+                            class:justify-center=&quot;centered&quot;
+                            class:justify-start=&quot;!centered&quot;
+                        &gt;
+                            &lt;div class=&quot;relative&quot;&gt;
+                                &lt;div aria-hidden=&quot;true&quot; class=&quot; absolute inset-1 rounded-2xl blur-xl &#123;type === 'warning' ? 'bg-amber-500/25' : type === 'forbidden' ? 'bg-violet-500/25' : type === 'offline' ? 'bg-slate-500/20' : 'bg-rose-500/25' &#125; &quot; &gt;&lt;/div&gt;
+
+                                &lt;span
+                                    class=&quot; relative grid place-items-center rounded-2xl border bg-white/90 shadow-lg backdrop-blur-sm &#123;compact ? 'h-12 w-12' : 'h-14 w-14'&#125; &#123;type === 'warning' ? 'border-amber-200 text-amber-700 shadow-amber-950/10 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-300' : type === 'forbidden' ? 'border-violet-200 text-violet-700 shadow-violet-950/10 dark:border-violet-500/20 dark:bg-violet-500/10 dark:text-violet-300' : type === 'offline' ? 'border-slate-200 text-slate-700 shadow-slate-950/10 dark:border-white/10 dark:bg-white/5 dark:text-slate-300' : 'border-rose-200 text-rose-700 shadow-rose-950/10 dark:border-rose-500/20 dark:bg-rose-500/10 dark:text-rose-300' &#125; &quot;
+                                &gt;
+                                    &lt;span class=&quot; &#123;compact ? 'h-5 w-5' : 'h-6 w-6'&#125; &#123;iconClass !== '' ? iconClass : type === 'warning' ? 'icon-[lucide--triangle-alert]' : type === 'forbidden' ? 'icon-[lucide--shield-alert]' : type === 'offline' ? 'icon-[lucide--wifi-off]' : 'icon-[lucide--circle-x]' &#125; &quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/div&gt;
+                        &lt;/div&gt;
+
+                        &lt;!-- Error code --&gt;
+                        &lt;div
+                            class=&quot;mt-5 flex&quot;
+                            class:hidden=&quot;errorCode === ''&quot;
+                            class:justify-center=&quot;centered&quot;
+                            class:justify-start=&quot;!centered&quot;
+                        &gt;
+                            &lt;span
+                                class=&quot; rounded-full px-3 py-1 text-xs font-bold tracking-[0.14em] &#123;type === 'warning' ? 'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300' : type === 'forbidden' ? 'bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300' : type === 'offline' ? 'bg-slate-200 text-slate-700 dark:bg-white/10 dark:text-slate-300' : 'bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300' &#125; &quot;
+                            &gt;
+                                &#123;errorCode&#125;
+                            &lt;/span&gt;
+                        &lt;/div&gt;
+
+                        &lt;!-- Eyebrow --&gt;
+                        &lt;p
+                            class=&quot; text-xs font-bold uppercase tracking-[0.18em] &#123;errorCode !== '' ? 'mt-4' : 'mt-5'&#125; &#123;type === 'warning' ? 'text-amber-700 dark:text-amber-400' : type === 'forbidden' ? 'text-violet-700 dark:text-violet-400' : type === 'offline' ? 'text-slate-600 dark:text-slate-400' : 'text-rose-700 dark:text-rose-400' &#125; &quot;
+                            class:hidden=&quot;eyebrow === ''&quot;
+                        &gt;
+                            &#123;eyebrow&#125;
+                        &lt;/p&gt;
+
+                        &lt;!-- Title --&gt;
+                        &lt;h2
+                            id=&quot;error-state-title&quot;
+                            class=&quot; font-bold leading-tight tracking-tight text-slate-950 dark:text-white &#123;eyebrow !== '' || errorCode !== '' ? 'mt-3' : 'mt-5'&#125; &#123;compact ? 'text-xl sm:text-2xl' : 'text-2xl sm:text-3xl lg:text-[2rem]'&#125; &quot;
+                        &gt;
+                            &#123;title&#125;
+                        &lt;/h2&gt;
+
+                        &lt;!-- Description --&gt;
+                        &lt;p
+                            class=&quot; mt-3 max-w-xl text-sm leading-6 text-slate-600 dark:text-slate-400 &#123;!compact ? 'sm:text-base sm:leading-7' : ''&#125; &#123;centered ? 'mx-auto' : 'mr-auto'&#125; &quot;
+                            class:hidden=&quot;description === ''&quot;
+                        &gt;
+                            &#123;description&#125;
+                        &lt;/p&gt;
+
+                        &lt;!-- Details --&gt;
+                        &lt;div
+                            class=&quot;mt-6 flex flex-wrap gap-x-5 gap-y-3&quot;
+                            class:hidden=&quot;details.length === 0&quot;
+                            class:justify-center=&quot;centered&quot;
+                            class:justify-start=&quot;!centered&quot;
+                        &gt;
+                            &#123;#each details.slice(0, 4) as detail&#125;
+                            &lt;div class=&quot;inline-flex items-center gap-2 text-sm font-medium text-slate-600 dark:text-slate-300&quot;&gt;
+                                &lt;span
+                                    class=&quot; grid h-6 w-6 shrink-0 place-items-center rounded-full &#123;type === 'warning' ? 'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300' : type === 'forbidden' ? 'bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300' : type === 'offline' ? 'bg-slate-200 text-slate-700 dark:bg-white/10 dark:text-slate-300' : 'bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300' &#125; &quot;
+                                &gt;
+                                    &lt;span class=&quot;&#123;detail.iconClass&#125; h-3.5 w-3.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &#123;detail.label&#125;
+                            &lt;/div&gt;
+                            &#123;/each&#125;
+                        &lt;/div&gt;
+
+                        &lt;!-- Actions --&gt;
+                        &lt;div
+                            class=&quot;mt-7 flex flex-col gap-3 sm:flex-row&quot;
+                            class:hidden=&quot;primaryLabel === '' &amp;&amp; secondaryLabel === '' &amp;&amp; retryLabel === ''&quot;
+                            class:justify-center=&quot;centered&quot;
+                            class:justify-start=&quot;!centered&quot;
+                        &gt;
+                            &lt;!-- Secondary --&gt;
+                            &lt;a
+                                href=&quot;&#123;secondaryHref&#125;&quot;
+                                class=&quot;h-11 items-center justify-center rounded-xl border border-slate-200 bg-white/90 px-4 text-sm font-semibold text-slate-700 shadow-sm backdrop-blur-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-white hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500/30 dark:hover:bg-white/10 dark:hover:text-indigo-300&quot;
+                                class:hidden=&quot;secondaryLabel === ''&quot;
+                                class:inline-flex=&quot;secondaryLabel !== ''&quot;
+                            &gt;
+                                &#123;secondaryLabel&#125;
+                            &lt;/a&gt;
+
+                            &lt;!-- Retry --&gt;
+                            &lt;button
+                                type=&quot;button&quot;
+                                @click=&quot;&#123;retryAction&#125;&quot;
+                                class=&quot; group h-11 items-center justify-center gap-2 rounded-xl px-4 text-sm font-bold text-white shadow-lg transition hover:-translate-y-0.5 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 &#123;type === 'warning' ? 'bg-amber-600 shadow-amber-600/20 hover:bg-amber-500 focus-visible:ring-amber-500' : type === 'forbidden' ? 'bg-violet-600 shadow-violet-600/20 hover:bg-violet-500 focus-visible:ring-violet-500' : type === 'offline' ? 'bg-slate-800 shadow-slate-900/20 hover:bg-slate-700 focus-visible:ring-slate-500 dark:bg-slate-200 dark:text-slate-950 dark:hover:bg-white' : 'bg-rose-600 shadow-rose-600/20 hover:bg-rose-500 focus-visible:ring-rose-500' &#125; &quot;
+                                class:hidden=&quot;retryLabel === ''&quot;
+                                class:inline-flex=&quot;retryLabel !== ''&quot;
+                            &gt;
+                                &lt;span class=&quot;icon-[lucide--rotate-cw] h-4 w-4 transition-transform group-hover:rotate-45&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                &#123;retryLabel&#125;
+                            &lt;/button&gt;
+
+                            &lt;!-- Primary link --&gt;
+                            &lt;a
+                                href=&quot;&#123;primaryHref&#125;&quot;
+                                class=&quot; group h-11 items-center justify-center gap-2 rounded-xl px-4 text-sm font-bold text-white shadow-lg transition hover:-translate-y-0.5 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 &#123;type === 'warning' ? 'bg-amber-600 shadow-amber-600/20 hover:bg-amber-500 focus-visible:ring-amber-500' : type === 'forbidden' ? 'bg-violet-600 shadow-violet-600/20 hover:bg-violet-500 focus-visible:ring-violet-500' : type === 'offline' ? 'bg-slate-800 shadow-slate-900/20 hover:bg-slate-700 focus-visible:ring-slate-500 dark:bg-slate-200 dark:text-slate-950 dark:hover:bg-white' : 'bg-rose-600 shadow-rose-600/20 hover:bg-rose-500 focus-visible:ring-rose-500' &#125; &quot;
+                                class:hidden=&quot;primaryLabel === ''&quot;
+                                class:inline-flex=&quot;primaryLabel !== ''&quot;
+                            &gt;
+                                &#123;primaryLabel&#125;
+
+                                &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/a&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/section&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/error-support-link.wrn b/app/pages/components/error-support-link.wrn
new file mode 100644
index 00000000..8efa6ad2
--- /dev/null
+++ b/app/pages/components/error-support-link.wrn
@@ -0,0 +1,32 @@
+page ErrorSupportLinkcomponent {
+  seo {
+    title = "ErrorSupportLink component"
+    description = "Reusable error support link component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ErrorSupportLink</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>ErrorSupportLink</h1><p>Reusable error support link component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ErrorSupportLink label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ErrorSupportLink&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ErrorSupportLink.wrn</code></p><pre data-language="wrn"><code>component ErrorSupportLink &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/estimated-cost-summary.wrn b/app/pages/components/estimated-cost-summary.wrn
new file mode 100644
index 00000000..8cf81089
--- /dev/null
+++ b/app/pages/components/estimated-cost-summary.wrn
@@ -0,0 +1,34 @@
+page EstimatedCostSummarycomponent {
+  seo {
+    title = "EstimatedCostSummary component"
+    description = "Reusable estimated cost summary component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">EstimatedCostSummary</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>EstimatedCostSummary</h1><p>Reusable estimated cost summary component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;EstimatedCostSummary eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;EstimatedCostSummary&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/EstimatedCostSummary.wrn</code></p><pre data-language="wrn"><code>component EstimatedCostSummary &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/event-table.wrn b/app/pages/components/event-table.wrn
new file mode 100644
index 00000000..398025f4
--- /dev/null
+++ b/app/pages/components/event-table.wrn
@@ -0,0 +1,31 @@
+page EventTablecomponent {
+  seo {
+    title = "EventTable component"
+    description = "Reusable event table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">EventTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>EventTable</h1><p>Reusable event table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;EventTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;EventTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/EventTable.wrn</code></p><pre data-language="wrn"><code>component EventTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/expandable-text.wrn b/app/pages/components/expandable-text.wrn
new file mode 100644
index 00000000..93d57ac9
--- /dev/null
+++ b/app/pages/components/expandable-text.wrn
@@ -0,0 +1,34 @@
+page ExpandableTextcomponent {
+  seo {
+    title = "ExpandableText component"
+    description = "Reusable expandable text component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ExpandableText</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ExpandableText</h1><p>Reusable expandable text component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ExpandableText eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ExpandableText&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ExpandableText.wrn</code></p><pre data-language="wrn"><code>component ExpandableText &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/expiry-date-time-picker.wrn b/app/pages/components/expiry-date-time-picker.wrn
new file mode 100644
index 00000000..a6741af3
--- /dev/null
+++ b/app/pages/components/expiry-date-time-picker.wrn
@@ -0,0 +1,37 @@
+page ExpiryDateTimePickercomponent {
+  seo {
+    title = "ExpiryDateTimePicker component"
+    description = "Reusable expiry date time picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ExpiryDateTimePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ExpiryDateTimePicker</h1><p>Reusable expiry date time picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ExpiryDateTimePicker label=&quot;ExpiryDateTime&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ExpiryDateTimePicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;ExpiryDateTime&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ExpiryDateTimePicker.wrn</code></p><pre data-language="wrn"><code>component ExpiryDateTimePicker &#123;
+  props &#123;
+    label = &quot;ExpiryDateTime&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/export-progress.wrn b/app/pages/components/export-progress.wrn
new file mode 100644
index 00000000..ed542d23
--- /dev/null
+++ b/app/pages/components/export-progress.wrn
@@ -0,0 +1,32 @@
+page ExportProgresscomponent {
+  seo {
+    title = "ExportProgress component"
+    description = "Reusable export progress component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ExportProgress</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>ExportProgress</h1><p>Reusable export progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ExportProgress title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ExportProgress&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ExportProgress.wrn</code></p><pre data-language="wrn"><code>component ExportProgress &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/external-link.wrn b/app/pages/components/external-link.wrn
new file mode 100644
index 00000000..6f632d11
--- /dev/null
+++ b/app/pages/components/external-link.wrn
@@ -0,0 +1,32 @@
+page ExternalLinkcomponent {
+  seo {
+    title = "ExternalLink component"
+    description = "Reusable external link component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ExternalLink</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>ExternalLink</h1><p>Reusable external link component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ExternalLink label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ExternalLink&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ExternalLink.wrn</code></p><pre data-language="wrn"><code>component ExternalLink &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/eyebrow-text.wrn b/app/pages/components/eyebrow-text.wrn
new file mode 100644
index 00000000..fc0a17c6
--- /dev/null
+++ b/app/pages/components/eyebrow-text.wrn
@@ -0,0 +1,29 @@
+page EyebrowTextcomponent {
+  seo {
+    title = "EyebrowText component"
+    description = "Reusable eyebrow text component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">EyebrowText</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>EyebrowText</h1><p>Reusable eyebrow text component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;EyebrowText text=&quot;text&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;EyebrowText&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>text</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/EyebrowText.wrn</code></p><pre data-language="wrn"><code>component EyebrowText &#123;
+  props &#123;
+    text = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-type wire-type--small wire-text--&#123;align&#125;  &#123;class&#125;&quot;&gt;&#123;text&#125;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/factor-card.wrn b/app/pages/components/factor-card.wrn
new file mode 100644
index 00000000..20e8a808
--- /dev/null
+++ b/app/pages/components/factor-card.wrn
@@ -0,0 +1,34 @@
+page FactorCardcomponent {
+  seo {
+    title = "FactorCard component"
+    description = "Reusable factor card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FactorCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>FactorCard</h1><p>Reusable factor card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FactorCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FactorCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FactorCard.wrn</code></p><pre data-language="wrn"><code>component FactorCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/fallback-route-builder.wrn b/app/pages/components/fallback-route-builder.wrn
new file mode 100644
index 00000000..28a606e4
--- /dev/null
+++ b/app/pages/components/fallback-route-builder.wrn
@@ -0,0 +1,34 @@
+page FallbackRouteBuildercomponent {
+  seo {
+    title = "FallbackRouteBuilder component"
+    description = "Reusable fallback route builder component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FallbackRouteBuilder</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>FallbackRouteBuilder</h1><p>Reusable fallback route builder component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FallbackRouteBuilder eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FallbackRouteBuilder&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FallbackRouteBuilder.wrn</code></p><pre data-language="wrn"><code>component FallbackRouteBuilder &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/fallback-route-diagram.wrn b/app/pages/components/fallback-route-diagram.wrn
new file mode 100644
index 00000000..645b9a4b
--- /dev/null
+++ b/app/pages/components/fallback-route-diagram.wrn
@@ -0,0 +1,32 @@
+page FallbackRouteDiagramcomponent {
+  seo {
+    title = "FallbackRouteDiagram component"
+    description = "Reusable fallback route diagram component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FallbackRouteDiagram</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>FallbackRouteDiagram</h1><p>Reusable fallback route diagram component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FallbackRouteDiagram title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FallbackRouteDiagram&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FallbackRouteDiagram.wrn</code></p><pre data-language="wrn"><code>component FallbackRouteDiagram &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/faq.wrn b/app/pages/components/faq.wrn
new file mode 100644
index 00000000..487945f7
--- /dev/null
+++ b/app/pages/components/faq.wrn
@@ -0,0 +1,34 @@
+page FAQcomponent {
+  seo {
+    title = "FAQ component"
+    description = "Reusable faq component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FAQ</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>FAQ</h1><p>Reusable faq component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FAQ eyebrow=&quot;eyebrow&quot; title=&quot;Frequently asked questions&quot; description=&quot;description&quot; items=&quot;[]&quot; centered=&quot;true&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FAQ&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Frequently asked questions&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>centered</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>allowMultiple</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>defaultOpenIndex</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FAQ.wrn</code></p><pre data-language="wrn"><code>component FAQ &#123;
+  props &#123;
+    class = &quot;&quot;
+    eyebrow = &quot;&quot;
+    title = &quot;Frequently asked questions&quot;
+    description = &quot;&quot;
+    items = []
+    centered = true
+    allowMultiple = false
+    defaultOpenIndex = 0
+  &#125;
+  view &#123; &lt;FAQAccordion class=&quot;&#123;class&#125;&quot; eyebrow=&quot;&#123;eyebrow&#125;&quot; title=&quot;&#123;title&#125;&quot; description=&quot;&#123;description&#125;&quot; items=&quot;&#123;items&#125;&quot; centered=&quot;&#123;centered&#125;&quot; allowMultiple=&quot;&#123;allowMultiple&#125;&quot; defaultOpenIndex=&quot;&#123;defaultOpenIndex&#125;&quot; /&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/faqaccordion.wrn b/app/pages/components/faqaccordion.wrn
new file mode 100644
index 00000000..3551c08d
--- /dev/null
+++ b/app/pages/components/faqaccordion.wrn
@@ -0,0 +1,256 @@
+page FAQAccordioncomponent {
+  seo {
+    title = "FAQAccordion component"
+    description = "Reusable faqaccordion component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FAQAccordion</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>FAQAccordion</h1><p>Reusable faqaccordion component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>13 props</span><span>0 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FAQAccordion eyebrow=&quot;eyebrow&quot; title=&quot;Frequently asked questions&quot; description=&quot;description&quot; items=&quot;[]&quot; centered=&quot;true&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FAQAccordion&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Frequently asked questions&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>centered</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>compact</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>allowMultiple</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>defaultOpenIndex</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>showContact</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>contactText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Still have questions?&quot;</code></td></tr><tr><td><code>contactLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Contact support&quot;</code></td></tr><tr><td><code>contactHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;/support&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FAQAccordion.wrn</code></p><pre data-language="wrn"><code>component FAQAccordion &#123;
+    props &#123;
+        class = &quot;&quot;
+        eyebrow = &quot;&quot;
+        title = &quot;Frequently asked questions&quot;
+        description = &quot;&quot;
+
+        items = []
+
+        centered = true
+        compact = false
+
+        allowMultiple = false
+        defaultOpenIndex = 0
+
+        showContact = false
+        contactText = &quot;Still have questions?&quot;
+        contactLabel = &quot;Contact support&quot;
+        contactHref = &quot;/support&quot;
+    &#125;
+
+    state openIndexes = defaultOpenIndex &gt;= 0 ? [defaultOpenIndex] : []
+
+    functions &#123;
+        function isOpen(index) &#123;
+            return openIndexes.includes(index)
+        &#125;
+
+        function toggleItem(index) &#123;
+            if (isOpen(index)) &#123;
+                openIndexes = openIndexes.filter(
+                (itemIndex) =&gt; itemIndex !== index
+                )
+            &#125; else if (allowMultiple) &#123;
+                openIndexes = [...openIndexes, index]
+            &#125; else &#123;
+                openIndexes = [index]
+            &#125;
+        &#125;
+    &#125;
+
+    view &#123;
+        &lt;section
+            aria-labelledby=&quot;faq-accordion-title&quot;
+            class=&quot;w-full px-5 sm:px-8 lg:px-10 xl:px-12 &#123;class&#125;&quot;
+            class:py-10=&quot;compact&quot;
+            class:sm:py-12=&quot;compact&quot;
+            class:py-14=&quot;!compact&quot;
+            class:sm:py-16=&quot;!compact&quot;
+            class:lg:py-20=&quot;!compact&quot;
+            class:hidden=&quot;items.length === 0&quot;
+        &gt;
+            &lt;div
+                class=&quot;mx-auto w-full&quot;
+                class:max-w-5xl=&quot;centered&quot;
+                class:max-w-7xl=&quot;!centered&quot;
+            &gt;
+                &lt;div
+                    class=&quot;gap-10&quot;
+                    class:flex=&quot;centered&quot;
+                    class:flex-col=&quot;centered&quot;
+                    class:grid=&quot;!centered&quot;
+                    class:lg:grid-cols-[minmax(260px,0.7fr)_minmax(0,1.3fr)]=&quot;!centered&quot;
+                    class:lg:items-start=&quot;!centered&quot;
+                    class:lg:gap-14=&quot;!centered&quot;
+                &gt;
+                    &lt;!-- Heading --&gt;
+                    &lt;div
+                        class=&quot;min-w-0&quot;
+                        class:mx-auto=&quot;centered&quot;
+                        class:max-w-3xl=&quot;centered&quot;
+                        class:text-center=&quot;centered&quot;
+                        class:max-w-xl=&quot;!centered&quot;
+                        class:lg:sticky=&quot;!centered&quot;
+                        class:lg:top-24=&quot;!centered&quot;
+                    &gt;
+                        &lt;!-- Eyebrow --&gt;
+                        &lt;p
+                            class=&quot;text-xs font-bold uppercase tracking-[0.18em] text-indigo-600 dark:text-indigo-400&quot;
+                            class:hidden=&quot;eyebrow === ''&quot;
+                        &gt;
+                            &#123;eyebrow&#125;
+                        &lt;/p&gt;
+
+                        &lt;!-- Title --&gt;
+                        &lt;h2
+                            id=&quot;faq-accordion-title&quot;
+                            class=&quot;font-bold leading-tight tracking-tight text-slate-950 dark:text-white&quot;
+                            class:mt-3=&quot;eyebrow !== ''&quot;
+                            class:text-2xl=&quot;compact&quot;
+                            class:sm:text-3xl=&quot;compact&quot;
+                            class:text-3xl=&quot;!compact&quot;
+                            class:sm:text-4xl=&quot;!compact&quot;
+                        &gt;
+                            &#123;title&#125;
+                        &lt;/h2&gt;
+
+                        &lt;!-- Description --&gt;
+                        &lt;p
+                            class=&quot;mt-4 text-sm leading-7 text-slate-600 dark:text-slate-400&quot;
+                            class:hidden=&quot;description === ''&quot;
+                            class:sm:text-base=&quot;!compact&quot;
+                            class:mx-auto=&quot;centered&quot;
+                            class:max-w-2xl=&quot;centered&quot;
+                            class:max-w-xl=&quot;!centered&quot;
+                        &gt;
+                            &#123;description&#125;
+                        &lt;/p&gt;
+
+                        &lt;!-- Contact card --&gt;
+                        &lt;div
+                            class=&quot;mt-7 rounded-2xl border border-indigo-200/80 bg-linear-to-br from-indigo-50 via-white to-violet-50 p-5 shadow-sm dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-white/[0.03] dark:to-violet-500/10&quot;
+                            class:hidden=&quot;!showContact&quot;
+                        &gt;
+                            &lt;div
+                                class=&quot;flex items-center gap-4&quot;
+                                class:justify-center=&quot;centered&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-white text-indigo-600 shadow-sm ring-1 ring-inset ring-indigo-200 dark:bg-white/5 dark:text-indigo-300 dark:ring-indigo-500/20&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--messages-square] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;div
+                                    class=&quot;min-w-0&quot;
+                                    class:text-left=&quot;centered&quot;
+                                &gt;
+                                    &lt;p class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                        &#123;contactText&#125;
+                                    &lt;/p&gt;
+
+                                    &#123;#if contactLabel !== '' &amp;&amp; contactHref !== ''&#125;
+                                    &lt;a
+                                        href=&quot;&#123;contactHref&#125;&quot;
+                                        class=&quot;mt-1 inline-flex items-center gap-1.5 text-sm font-bold text-indigo-600 transition-colors duration-200 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300&quot;
+                                    &gt;
+                                        &#123;contactLabel&#125;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/a&gt;
+                                    &#123;/if&#125;
+                                &lt;/div&gt;
+                            &lt;/div&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+
+                    &lt;!-- Accordion --&gt;
+                    &lt;div class=&quot;min-w-0&quot;&gt;
+                        &lt;div class=&quot;space-y-3&quot;&gt;
+                            &#123;#each items as item, index&#125;
+                            &lt;article
+                                class=&quot; overflow-hidden rounded-2xl border transition-[border-color,background-color,box-shadow,transform] duration-300 ease-out &#123;isOpen(index) ? 'border-indigo-200 bg-indigo-50/60 shadow-md shadow-indigo-950/5 dark:border-indigo-500/20 dark:bg-indigo-500/10' : 'border-slate-200 bg-white shadow-sm hover:-translate-y-0.5 hover:border-indigo-200 hover:bg-slate-50 dark:border-white/10 dark:bg-white/[0.03] dark:hover:border-indigo-500/20 dark:hover:bg-white/5' &#125; &quot;
+                            &gt;
+                                &lt;h3&gt;
+                                    &lt;button
+                                        type=&quot;button&quot;
+                                        @click=&quot;toggleItem(index)&quot;
+                                        aria-expanded=&quot;&#123;isOpen(index)&#125;&quot;
+                                        aria-controls=&quot;faq-answer-&#123;index&#125;&quot;
+                                        class=&quot;flex w-full items-center justify-between gap-5 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-indigo-500&quot;
+                                        class:px-4=&quot;compact&quot;
+                                        class:py-4=&quot;compact&quot;
+                                        class:px-5=&quot;!compact&quot;
+                                        class:py-5=&quot;!compact&quot;
+                                        class:sm:px-6=&quot;!compact&quot;
+                                    &gt;
+                                        &lt;span class=&quot;flex min-w-0 items-start gap-3&quot;&gt;
+                                            &lt;!-- Number --&gt;
+                                            &lt;span
+                                                class=&quot; mt-0.5 grid h-7 w-7 shrink-0 place-items-center rounded-lg text-xs font-bold transition-[background-color,color,transform] duration-300 ease-out &#123;isOpen(index) ? 'bg-indigo-600 text-white' : 'bg-slate-100 text-slate-500 dark:bg-white/5 dark:text-slate-400' &#125; &quot;
+                                            &gt;
+                                                &#123;index + 1&#125;
+                                            &lt;/span&gt;
+
+                                            &lt;!-- Question --&gt;
+                                            &lt;span
+                                                class=&quot;font-semibold leading-6 text-slate-950 dark:text-white&quot;
+                                                class:text-sm=&quot;compact&quot;
+                                                class:text-base=&quot;!compact&quot;
+                                            &gt;
+                                                &#123;item.question&#125;
+                                            &lt;/span&gt;
+                                        &lt;/span&gt;
+
+                                        &lt;!-- Toggle icon --&gt;
+                                        &lt;span
+                                            class=&quot; grid h-8 w-8 shrink-0 place-items-center rounded-lg transition-[background-color,color,transform] duration-300 ease-out &#123;isOpen(index) ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300' : 'bg-slate-100 text-slate-500 dark:bg-white/5 dark:text-slate-400' &#125; &quot;
+                                        &gt;
+                                            &lt;span class=&quot; icon-[lucide--chevron-down] h-4 w-4 transition-transform duration-300 ease-out &#123;isOpen(index) ? 'rotate-180' : 'rotate-0'&#125; &quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                        &lt;/span&gt;
+                                    &lt;/button&gt;
+                                &lt;/h3&gt;
+
+                                &lt;div
+                                    id=&quot;faq-answer-&#123;index&#125;&quot;
+                                    role=&quot;region&quot;
+                                    aria-hidden=&quot;&#123;!isOpen(index)&#125;&quot;
+                                    class=&quot; grid overflow-hidden transition-[grid-template-rows,opacity] duration-300 ease-out &#123;isOpen(index) ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0' &#125; &quot;
+                                &gt;
+                                    &lt;div class=&quot;min-h-0 overflow-hidden&quot;&gt;
+                                        &lt;div class=&quot;border-t border-indigo-200/60 dark:border-indigo-500/15&quot;&gt;
+                                            &lt;div
+                                                class=&quot; text-sm leading-7 text-slate-600 transition-[transform,opacity] duration-300 ease-out dark:text-slate-400  &#123;compact ? 'px-4 pb-4 pt-3' : 'px-5 pb-5 pt-4 sm:px-6 sm:pb-6 sm:pt-5' &#125;  &#123;isOpen(index) ? 'translate-y-0 opacity-100' : '-translate-y-2 opacity-0' &#125; &quot;
+                                            &gt;
+                                                &lt;p class=&quot;m-0&quot;&gt;
+                                                    &#123;item.answer&#125;
+                                                &lt;/p&gt;
+
+                                                &#123;#if item.linkLabel !== '' &amp;&amp; item.href !== ''&#125;
+                                                &lt;a
+                                                    href=&quot;&#123;item.href&#125;&quot;
+                                                    class=&quot; group inline-flex items-center gap-2 text-sm font-bold text-indigo-600 transition-colors duration-200 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300 &quot;
+                                                &gt;
+                                                    &#123;item.linkLabel&#125;
+
+                                                    &lt;span class=&quot; icon-[lucide--arrow-up-right] h-4 w-4 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 &quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                                &lt;/a&gt;
+                                                &#123;/if&#125;
+                                            &lt;/div&gt;
+                                        &lt;/div&gt;
+                                    &lt;/div&gt;
+                                &lt;/div&gt;
+                            &lt;/article&gt;
+                            &#123;/each&#125;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- Tailwind safelist for utilities used by reactive class directives --&gt;
+            &lt;span class=&quot; hidden flex flex-col grid justify-center lg:gap-14 lg:grid-cols-[minmax(260px,0.7fr)_minmax(0,1.3fr)] lg:items-start lg:py-20 lg:sticky lg:top-24 max-w-2xl max-w-3xl max-w-5xl max-w-7xl max-w-xl mt-3 mx-auto px-4 px-5 py-4 py-5 py-10 py-14 sm:px-6 sm:py-12 sm:py-16 sm:text-base sm:text-3xl sm:text-4xl text-base text-center text-left text-sm text-2xl text-3xl grid-rows-[0fr] grid-rows-[1fr] opacity-0 opacity-100 -translate-y-2 translate-y-0 rotate-0 rotate-180 &quot; &gt;&lt;/span&gt;
+        &lt;/section&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/favicon-upload.wrn b/app/pages/components/favicon-upload.wrn
new file mode 100644
index 00000000..a46f6268
--- /dev/null
+++ b/app/pages/components/favicon-upload.wrn
@@ -0,0 +1,34 @@
+page FaviconUploadcomponent {
+  seo {
+    title = "FaviconUpload component"
+    description = "Reusable favicon upload component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FaviconUpload</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>FaviconUpload</h1><p>Reusable favicon upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FaviconUpload eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FaviconUpload&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FaviconUpload.wrn</code></p><pre data-language="wrn"><code>component FaviconUpload &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/fax-input.wrn b/app/pages/components/fax-input.wrn
new file mode 100644
index 00000000..a895eae5
--- /dev/null
+++ b/app/pages/components/fax-input.wrn
@@ -0,0 +1,37 @@
+page FaxInputcomponent {
+  seo {
+    title = "FaxInput component"
+    description = "Reusable fax input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FaxInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>FaxInput</h1><p>Reusable fax input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FaxInput label=&quot;Fax&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FaxInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Fax&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FaxInput.wrn</code></p><pre data-language="wrn"><code>component FaxInput &#123;
+  props &#123;
+    label = &quot;Fax&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/feature-card.wrn b/app/pages/components/feature-card.wrn
new file mode 100644
index 00000000..92e3a4e5
--- /dev/null
+++ b/app/pages/components/feature-card.wrn
@@ -0,0 +1,33 @@
+page FeatureCardcomponent {
+  seo {
+    title = "FeatureCard component"
+    description = "Reusable feature card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FeatureCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>FeatureCard</h1><p>Reusable feature card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FeatureCard icon=&quot;✦&quot; title=&quot;Feature&quot; description=&quot;description&quot; href=&quot;href&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FeatureCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;✦&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Feature&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FeatureCard.wrn</code></p><pre data-language="wrn"><code>component FeatureCard &#123;
+  props &#123;
+    class = &quot;&quot;
+    icon = &quot;✦&quot;
+    title = &quot;Feature&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;article class=&quot;group rounded-2xl border border-slate-200 bg-white p-6 transition duration-300 hover:-translate-y-1 hover:border-violet-300 hover:shadow-xl dark:border-slate-800 dark:bg-slate-900 &#123;class&#125;&quot;&gt;&lt;div class=&quot;flex size-11 items-center justify-center rounded-xl bg-violet-100 text-xl text-violet-700 transition group-hover:scale-110 dark:bg-violet-950 dark:text-violet-300&quot;&gt;&#123;icon&#125;&lt;/div&gt;&lt;h3 class=&quot;mt-5 text-lg font-bold&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p class=&quot;mt-2 leading-7 text-slate-600 dark:text-slate-300&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;mt-4 inline-flex font-semibold text-violet-600&quot;&gt;Learn more →&lt;/a&gt;&lt;/article&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/feature-checklist.wrn b/app/pages/components/feature-checklist.wrn
new file mode 100644
index 00000000..ea6f7e45
--- /dev/null
+++ b/app/pages/components/feature-checklist.wrn
@@ -0,0 +1,34 @@
+page FeatureChecklistcomponent {
+  seo {
+    title = "FeatureChecklist component"
+    description = "Reusable feature checklist component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FeatureChecklist</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>FeatureChecklist</h1><p>Reusable feature checklist component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FeatureChecklist eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FeatureChecklist&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FeatureChecklist.wrn</code></p><pre data-language="wrn"><code>component FeatureChecklist &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/feature-comparison-table.wrn b/app/pages/components/feature-comparison-table.wrn
new file mode 100644
index 00000000..59cb6f20
--- /dev/null
+++ b/app/pages/components/feature-comparison-table.wrn
@@ -0,0 +1,31 @@
+page FeatureComparisonTablecomponent {
+  seo {
+    title = "FeatureComparisonTable component"
+    description = "Reusable feature comparison table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FeatureComparisonTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>FeatureComparisonTable</h1><p>Reusable feature comparison table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FeatureComparisonTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FeatureComparisonTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FeatureComparisonTable.wrn</code></p><pre data-language="wrn"><code>component FeatureComparisonTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/feature-details-panel.wrn b/app/pages/components/feature-details-panel.wrn
new file mode 100644
index 00000000..61bd826d
--- /dev/null
+++ b/app/pages/components/feature-details-panel.wrn
@@ -0,0 +1,31 @@
+page FeatureDetailsPanelcomponent {
+  seo {
+    title = "FeatureDetailsPanel component"
+    description = "Reusable feature details panel component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FeatureDetailsPanel</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>FeatureDetailsPanel</h1><p>Reusable feature details panel component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FeatureDetailsPanel eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FeatureDetailsPanel&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FeatureDetailsPanel.wrn</code></p><pre data-language="wrn"><code>component FeatureDetailsPanel &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/feature-grid.wrn b/app/pages/components/feature-grid.wrn
new file mode 100644
index 00000000..0b36e62d
--- /dev/null
+++ b/app/pages/components/feature-grid.wrn
@@ -0,0 +1,30 @@
+page FeatureGridcomponent {
+  seo {
+    title = "FeatureGrid component"
+    description = "Reusable feature grid component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FeatureGrid</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>FeatureGrid</h1><p>Reusable feature grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>2 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FeatureGrid columns=&quot;3&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FeatureGrid&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>columns</code></td><td><code>number</code></td><td>Optional</td><td><code>3</code></td></tr><tr><td><code>className</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FeatureGrid.wrn</code></p><pre data-language="wrn"><code>component FeatureGrid &#123;
+  props &#123;
+    columns = 3
+    className = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;grid gap-5 &#123;columns === 2 ? 'md:grid-cols-2' : columns === 4 ? 'sm:grid-cols-2 xl:grid-cols-4' : 'md:grid-cols-2 lg:grid-cols-3'&#125; &#123;className&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/feature-icon-card.wrn b/app/pages/components/feature-icon-card.wrn
new file mode 100644
index 00000000..3d511cb2
--- /dev/null
+++ b/app/pages/components/feature-icon-card.wrn
@@ -0,0 +1,34 @@
+page FeatureIconCardcomponent {
+  seo {
+    title = "FeatureIconCard component"
+    description = "Reusable feature icon card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FeatureIconCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>FeatureIconCard</h1><p>Reusable feature icon card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FeatureIconCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FeatureIconCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FeatureIconCard.wrn</code></p><pre data-language="wrn"><code>component FeatureIconCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/feature-list.wrn b/app/pages/components/feature-list.wrn
new file mode 100644
index 00000000..c2d0f96f
--- /dev/null
+++ b/app/pages/components/feature-list.wrn
@@ -0,0 +1,31 @@
+page FeatureListcomponent {
+  seo {
+    title = "FeatureList component"
+    description = "Reusable feature list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FeatureList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>FeatureList</h1><p>Reusable feature list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FeatureList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FeatureList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FeatureList.wrn</code></p><pre data-language="wrn"><code>component FeatureList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/feature-tabs.wrn b/app/pages/components/feature-tabs.wrn
new file mode 100644
index 00000000..ba2b573f
--- /dev/null
+++ b/app/pages/components/feature-tabs.wrn
@@ -0,0 +1,34 @@
+page FeatureTabscomponent {
+  seo {
+    title = "FeatureTabs component"
+    description = "Reusable feature tabs component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FeatureTabs</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>FeatureTabs</h1><p>Reusable feature tabs component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FeatureTabs eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FeatureTabs&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FeatureTabs.wrn</code></p><pre data-language="wrn"><code>component FeatureTabs &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/feature-timeline.wrn b/app/pages/components/feature-timeline.wrn
new file mode 100644
index 00000000..8c67a9bb
--- /dev/null
+++ b/app/pages/components/feature-timeline.wrn
@@ -0,0 +1,32 @@
+page FeatureTimelinecomponent {
+  seo {
+    title = "FeatureTimeline component"
+    description = "Reusable feature timeline component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FeatureTimeline</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>FeatureTimeline</h1><p>Reusable feature timeline component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FeatureTimeline title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FeatureTimeline&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FeatureTimeline.wrn</code></p><pre data-language="wrn"><code>component FeatureTimeline &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/feature-unavailable-state.wrn b/app/pages/components/feature-unavailable-state.wrn
new file mode 100644
index 00000000..21251e8f
--- /dev/null
+++ b/app/pages/components/feature-unavailable-state.wrn
@@ -0,0 +1,32 @@
+page FeatureUnavailableStatecomponent {
+  seo {
+    title = "FeatureUnavailableState component"
+    description = "Reusable feature unavailable state component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FeatureUnavailableState</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>FeatureUnavailableState</h1><p>Reusable feature unavailable state component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FeatureUnavailableState label=&quot;FeatureUnavailable&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FeatureUnavailableState&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;FeatureUnavailable&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FeatureUnavailableState.wrn</code></p><pre data-language="wrn"><code>component FeatureUnavailableState &#123;
+  props &#123;
+    label = &quot;FeatureUnavailable&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/featured-blog-card.wrn b/app/pages/components/featured-blog-card.wrn
new file mode 100644
index 00000000..1e6bd259
--- /dev/null
+++ b/app/pages/components/featured-blog-card.wrn
@@ -0,0 +1,34 @@
+page FeaturedBlogCardcomponent {
+  seo {
+    title = "FeaturedBlogCard component"
+    description = "Reusable featured blog card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FeaturedBlogCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>FeaturedBlogCard</h1><p>Reusable featured blog card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FeaturedBlogCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FeaturedBlogCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FeaturedBlogCard.wrn</code></p><pre data-language="wrn"><code>component FeaturedBlogCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/field-actions.wrn b/app/pages/components/field-actions.wrn
new file mode 100644
index 00000000..69835370
--- /dev/null
+++ b/app/pages/components/field-actions.wrn
@@ -0,0 +1,32 @@
+page FieldActionscomponent {
+  seo {
+    title = "FieldActions component"
+    description = "Reusable field actions component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FieldActions</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>FieldActions</h1><p>Reusable field actions component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FieldActions label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FieldActions&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FieldActions.wrn</code></p><pre data-language="wrn"><code>component FieldActions &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/file-input.wrn b/app/pages/components/file-input.wrn
new file mode 100644
index 00000000..cf47e788
--- /dev/null
+++ b/app/pages/components/file-input.wrn
@@ -0,0 +1,37 @@
+page FileInputcomponent {
+  seo {
+    title = "FileInput component"
+    description = "Reusable file input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FileInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>FileInput</h1><p>Reusable file input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FileInput label=&quot;File&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FileInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;File&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FileInput.wrn</code></p><pre data-language="wrn"><code>component FileInput &#123;
+  props &#123;
+    label = &quot;File&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/file-list.wrn b/app/pages/components/file-list.wrn
new file mode 100644
index 00000000..4edab9aa
--- /dev/null
+++ b/app/pages/components/file-list.wrn
@@ -0,0 +1,31 @@
+page FileListcomponent {
+  seo {
+    title = "FileList component"
+    description = "Reusable file list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FileList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>FileList</h1><p>Reusable file list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FileList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FileList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FileList.wrn</code></p><pre data-language="wrn"><code>component FileList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/file-size-input.wrn b/app/pages/components/file-size-input.wrn
new file mode 100644
index 00000000..4c146f4f
--- /dev/null
+++ b/app/pages/components/file-size-input.wrn
@@ -0,0 +1,37 @@
+page FileSizeInputcomponent {
+  seo {
+    title = "FileSizeInput component"
+    description = "Reusable file size input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FileSizeInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>FileSizeInput</h1><p>Reusable file size input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FileSizeInput label=&quot;FileSize&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FileSizeInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;FileSize&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FileSizeInput.wrn</code></p><pre data-language="wrn"><code>component FileSizeInput &#123;
+  props &#123;
+    label = &quot;FileSize&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/file-size-label.wrn b/app/pages/components/file-size-label.wrn
new file mode 100644
index 00000000..5364cd5e
--- /dev/null
+++ b/app/pages/components/file-size-label.wrn
@@ -0,0 +1,34 @@
+page FileSizeLabelcomponent {
+  seo {
+    title = "FileSizeLabel component"
+    description = "Reusable file size label component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FileSizeLabel</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>FileSizeLabel</h1><p>Reusable file size label component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FileSizeLabel eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FileSizeLabel&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FileSizeLabel.wrn</code></p><pre data-language="wrn"><code>component FileSizeLabel &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/file-type-badge.wrn b/app/pages/components/file-type-badge.wrn
new file mode 100644
index 00000000..514bf395
--- /dev/null
+++ b/app/pages/components/file-type-badge.wrn
@@ -0,0 +1,32 @@
+page FileTypeBadgecomponent {
+  seo {
+    title = "FileTypeBadge component"
+    description = "Reusable file type badge component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FileTypeBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>FileTypeBadge</h1><p>Reusable file type badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FileTypeBadge label=&quot;FileType&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FileTypeBadge&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;FileType&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FileTypeBadge.wrn</code></p><pre data-language="wrn"><code>component FileTypeBadge &#123;
+  props &#123;
+    label = &quot;FileType&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/file-upload-primitive.wrn b/app/pages/components/file-upload-primitive.wrn
new file mode 100644
index 00000000..e9335f06
--- /dev/null
+++ b/app/pages/components/file-upload-primitive.wrn
@@ -0,0 +1,42 @@
+page fileuploadcomponent {
+  seo {
+    title = "file-upload component"
+    description = "Reusable file-upload component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">file-upload</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>file-upload</h1><p>Reusable file-upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>7 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;file-upload store=&quot;public&quot; endpoint=&quot;/api/upload&quot; accept=&quot;accept&quot; multiple=&quot;false&quot; max=&quot;0&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;file-upload&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>store</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;public&quot;</code></td></tr><tr><td><code>endpoint</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;/api/upload&quot;</code></td></tr><tr><td><code>accept</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>multiple</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>max</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Drag files here or click to browse&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/file-upload.wrn</code></p><pre data-language="wrn"><code>// Drag-and-drop file uploader with per-file progress. Progressive enhancement:
+// the markup is inert until /__wrnexus/uploader.js loads (auto-injected when a
+// page contains `data-uploader`). Pairs with `handleUpload` on the server —
+// files POST to `endpoint`, which returns `&#123; ok, files:[&#123; key, url, … &#125;] &#125;`.
+//
+//   &lt;div data-component=&quot;file-upload&quot; store=&quot;public&quot; endpoint=&quot;/api/upload&quot;
+//        accept=&quot;image/*&quot; max=&quot;10000000&quot; multiple=&quot;true&quot;&gt;&lt;/div&gt;
+component FileUpload &#123;
+  props &#123;
+    store = &quot;public&quot;
+    endpoint = &quot;/api/upload&quot;
+    accept = &quot;&quot;
+    multiple = false
+    max = 0
+    label = &quot;Drag files here or click to browse&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;wire-fileupload &#123;class&#125;&quot; data-uploader=&quot;&#123;store&#125;&quot; data-endpoint=&quot;&#123;endpoint&#125;&quot; data-accept=&quot;&#123;accept&#125;&quot; data-multiple=&quot;&#123;multiple&#125;&quot; data-max=&quot;&#123;max&#125;&quot; data-label=&quot;&#123;label&#125;&quot;&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/file-upload.wrn b/app/pages/components/file-upload.wrn
new file mode 100644
index 00000000..3a0cb362
--- /dev/null
+++ b/app/pages/components/file-upload.wrn
@@ -0,0 +1,35 @@
+page FileUploadcomponent {
+  seo {
+    title = "FileUpload component"
+    description = "Reusable file upload component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FileUpload</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>FileUpload</h1><p>Reusable file upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>7 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FileUpload id=&quot;file&quot; name=&quot;file&quot; label=&quot;Upload file&quot; accept=&quot;accept&quot; multiple=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FileUpload&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;file&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;file&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Upload file&quot;</code></td></tr><tr><td><code>accept</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>multiple</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Drag and drop or browse&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FileUpload.wrn</code></p><pre data-language="wrn"><code>component FileUpload &#123;
+  props &#123;
+    class = &quot;&quot;
+    id = &quot;file&quot;
+    name = &quot;file&quot;
+    label = &quot;Upload file&quot;
+    accept = &quot;&quot;
+    multiple = false
+    help = &quot;Drag and drop or browse&quot;
+  &#125;
+  view &#123;
+    &lt;label for=&quot;&#123;id&#125;&quot; class=&quot;flex min-h-40 cursor-pointer flex-col items-center justify-center rounded-2xl border-2 border-dashed border-slate-300 bg-slate-50 p-6 text-center transition hover:border-violet-500 hover:bg-violet-50/50 focus-within:ring-4 focus-within:ring-violet-500/10 dark:border-slate-700 dark:bg-slate-900/50 &#123;class&#125;&quot;&gt;&lt;span class=&quot;text-3xl&quot; aria-hidden=&quot;true&quot;&gt;⇧&lt;/span&gt;&lt;span class=&quot;mt-2 font-semibold&quot;&gt;&#123;label&#125;&lt;/span&gt;&lt;span class=&quot;mt-1 text-sm text-slate-500&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;input id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; type=&quot;file&quot; accept=&quot;&#123;accept&#125;&quot; multiple=&quot;&#123;multiple&#125;&quot; class=&quot;sr-only&quot; /&gt;&lt;/label&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/filter-bar.wrn b/app/pages/components/filter-bar.wrn
new file mode 100644
index 00000000..8c1f3777
--- /dev/null
+++ b/app/pages/components/filter-bar.wrn
@@ -0,0 +1,30 @@
+page FilterBarcomponent {
+  seo {
+    title = "FilterBar component"
+    description = "Reusable filter bar component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FilterBar</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>FilterBar</h1><p>Reusable filter bar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FilterBar label=&quot;Filters&quot; clearLabel=&quot;Clear filters&quot; showClear=&quot;true&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FilterBar&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Filters&quot;</code></td></tr><tr><td><code>clearLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Clear filters&quot;</code></td></tr><tr><td><code>showClear</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FilterBar.wrn</code></p><pre data-language="wrn"><code>component FilterBar &#123;
+  props &#123;
+    label = &quot;Filters&quot;
+    clearLabel = &quot;Clear filters&quot;
+    showClear = true
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section aria-label=&quot;&#123;label&#125;&quot; class=&quot;wire-filter-bar &#123;class&#125;&quot;&gt;&lt;div class=&quot;wire-filter-bar__controls&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;button data-show=&quot;showClear&quot; type=&quot;reset&quot; class=&quot;wire-btn wire-btn--ghost wire-btn--sm&quot;&gt;&#123;clearLabel&#125;&lt;/button&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/filter-menu.wrn b/app/pages/components/filter-menu.wrn
new file mode 100644
index 00000000..473b3fdb
--- /dev/null
+++ b/app/pages/components/filter-menu.wrn
@@ -0,0 +1,31 @@
+page FilterMenucomponent {
+  seo {
+    title = "FilterMenu component"
+    description = "Reusable filter menu component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FilterMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>FilterMenu</h1><p>Reusable filter menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FilterMenu title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FilterMenu&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FilterMenu.wrn</code></p><pre data-language="wrn"><code>component FilterMenu &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/filter-search-input.wrn b/app/pages/components/filter-search-input.wrn
new file mode 100644
index 00000000..eb4aa893
--- /dev/null
+++ b/app/pages/components/filter-search-input.wrn
@@ -0,0 +1,37 @@
+page FilterSearchInputcomponent {
+  seo {
+    title = "FilterSearchInput component"
+    description = "Reusable filter search input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FilterSearchInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>FilterSearchInput</h1><p>Reusable filter search input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FilterSearchInput label=&quot;FilterSearch&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FilterSearchInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;FilterSearch&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FilterSearchInput.wrn</code></p><pre data-language="wrn"><code>component FilterSearchInput &#123;
+  props &#123;
+    label = &quot;FilterSearch&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/filterable-table.wrn b/app/pages/components/filterable-table.wrn
new file mode 100644
index 00000000..af09ec08
--- /dev/null
+++ b/app/pages/components/filterable-table.wrn
@@ -0,0 +1,31 @@
+page FilterableTablecomponent {
+  seo {
+    title = "FilterableTable component"
+    description = "Reusable filterable table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FilterableTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>FilterableTable</h1><p>Reusable filterable table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FilterableTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FilterableTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FilterableTable.wrn</code></p><pre data-language="wrn"><code>component FilterableTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/final-cta.wrn b/app/pages/components/final-cta.wrn
new file mode 100644
index 00000000..961949de
--- /dev/null
+++ b/app/pages/components/final-cta.wrn
@@ -0,0 +1,32 @@
+page FinalCTAcomponent {
+  seo {
+    title = "FinalCTA component"
+    description = "Reusable final c t a component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FinalCTA</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>FinalCTA</h1><p>Reusable final c t a component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FinalCTA label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FinalCTA&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FinalCTA.wrn</code></p><pre data-language="wrn"><code>component FinalCTA &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/first-name-input.wrn b/app/pages/components/first-name-input.wrn
new file mode 100644
index 00000000..80557535
--- /dev/null
+++ b/app/pages/components/first-name-input.wrn
@@ -0,0 +1,37 @@
+page FirstNameInputcomponent {
+  seo {
+    title = "FirstNameInput component"
+    description = "Reusable first name input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FirstNameInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>FirstNameInput</h1><p>Reusable first name input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FirstNameInput label=&quot;FirstName&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FirstNameInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;FirstName&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FirstNameInput.wrn</code></p><pre data-language="wrn"><code>component FirstNameInput &#123;
+  props &#123;
+    label = &quot;FirstName&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/flex.wrn b/app/pages/components/flex.wrn
new file mode 100644
index 00000000..fd20a3d8
--- /dev/null
+++ b/app/pages/components/flex.wrn
@@ -0,0 +1,27 @@
+page Flexcomponent {
+  seo {
+    title = "Flex component"
+    description = "Reusable flex component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Flex</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Flex</h1><p>Reusable flex component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Flex /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Flex&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Flex.wrn</code></p><pre data-language="wrn"><code>component Flex &#123;
+  props &#123;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-flex &#123;class&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/font-picker.wrn b/app/pages/components/font-picker.wrn
new file mode 100644
index 00000000..217e6bcb
--- /dev/null
+++ b/app/pages/components/font-picker.wrn
@@ -0,0 +1,37 @@
+page FontPickercomponent {
+  seo {
+    title = "FontPicker component"
+    description = "Reusable font picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FontPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>FontPicker</h1><p>Reusable font picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FontPicker label=&quot;Font&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FontPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Font&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FontPicker.wrn</code></p><pre data-language="wrn"><code>component FontPicker &#123;
+  props &#123;
+    label = &quot;Font&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/font-size-picker.wrn b/app/pages/components/font-size-picker.wrn
new file mode 100644
index 00000000..f6083695
--- /dev/null
+++ b/app/pages/components/font-size-picker.wrn
@@ -0,0 +1,37 @@
+page FontSizePickercomponent {
+  seo {
+    title = "FontSizePicker component"
+    description = "Reusable font size picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FontSizePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>FontSizePicker</h1><p>Reusable font size picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FontSizePicker label=&quot;FontSize&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FontSizePicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;FontSize&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FontSizePicker.wrn</code></p><pre data-language="wrn"><code>component FontSizePicker &#123;
+  props &#123;
+    label = &quot;FontSize&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/font-weight-picker.wrn b/app/pages/components/font-weight-picker.wrn
new file mode 100644
index 00000000..ac5f7920
--- /dev/null
+++ b/app/pages/components/font-weight-picker.wrn
@@ -0,0 +1,37 @@
+page FontWeightPickercomponent {
+  seo {
+    title = "FontWeightPicker component"
+    description = "Reusable font weight picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FontWeightPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>FontWeightPicker</h1><p>Reusable font weight picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FontWeightPicker label=&quot;FontWeight&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FontWeightPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;FontWeight&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FontWeightPicker.wrn</code></p><pre data-language="wrn"><code>component FontWeightPicker &#123;
+  props &#123;
+    label = &quot;FontWeight&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/footer-language-switcher.wrn b/app/pages/components/footer-language-switcher.wrn
new file mode 100644
index 00000000..5c3a545c
--- /dev/null
+++ b/app/pages/components/footer-language-switcher.wrn
@@ -0,0 +1,34 @@
+page FooterLanguageSwitchercomponent {
+  seo {
+    title = "FooterLanguageSwitcher component"
+    description = "Reusable footer language switcher component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FooterLanguageSwitcher</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>FooterLanguageSwitcher</h1><p>Reusable footer language switcher component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FooterLanguageSwitcher eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FooterLanguageSwitcher&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FooterLanguageSwitcher.wrn</code></p><pre data-language="wrn"><code>component FooterLanguageSwitcher &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/footer-status-indicator.wrn b/app/pages/components/footer-status-indicator.wrn
new file mode 100644
index 00000000..b56d5265
--- /dev/null
+++ b/app/pages/components/footer-status-indicator.wrn
@@ -0,0 +1,32 @@
+page FooterStatusIndicatorcomponent {
+  seo {
+    title = "FooterStatusIndicator component"
+    description = "Reusable footer status indicator component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FooterStatusIndicator</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>FooterStatusIndicator</h1><p>Reusable footer status indicator component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FooterStatusIndicator label=&quot;FooterStatus&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FooterStatusIndicator&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;FooterStatus&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FooterStatusIndicator.wrn</code></p><pre data-language="wrn"><code>component FooterStatusIndicator &#123;
+  props &#123;
+    label = &quot;FooterStatus&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/forbidden-page.wrn b/app/pages/components/forbidden-page.wrn
new file mode 100644
index 00000000..1f485b6a
--- /dev/null
+++ b/app/pages/components/forbidden-page.wrn
@@ -0,0 +1,34 @@
+page ForbiddenPagecomponent {
+  seo {
+    title = "ForbiddenPage component"
+    description = "Reusable forbidden page component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ForbiddenPage</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ForbiddenPage</h1><p>Reusable forbidden page component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ForbiddenPage eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ForbiddenPage&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ForbiddenPage.wrn</code></p><pre data-language="wrn"><code>component ForbiddenPage &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/forbidden-state.wrn b/app/pages/components/forbidden-state.wrn
new file mode 100644
index 00000000..b65d4165
--- /dev/null
+++ b/app/pages/components/forbidden-state.wrn
@@ -0,0 +1,32 @@
+page ForbiddenStatecomponent {
+  seo {
+    title = "ForbiddenState component"
+    description = "Reusable forbidden state component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ForbiddenState</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>ForbiddenState</h1><p>Reusable forbidden state component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ForbiddenState label=&quot;Forbidden&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ForbiddenState&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Forbidden&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ForbiddenState.wrn</code></p><pre data-language="wrn"><code>component ForbiddenState &#123;
+  props &#123;
+    label = &quot;Forbidden&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/forgot-password-form.wrn b/app/pages/components/forgot-password-form.wrn
new file mode 100644
index 00000000..a6074bcb
--- /dev/null
+++ b/app/pages/components/forgot-password-form.wrn
@@ -0,0 +1,34 @@
+page ForgotPasswordFormcomponent {
+  seo {
+    title = "ForgotPasswordForm component"
+    description = "Reusable forgot password form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ForgotPasswordForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ForgotPasswordForm</h1><p>Reusable forgot password form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ForgotPasswordForm eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ForgotPasswordForm&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ForgotPasswordForm.wrn</code></p><pre data-language="wrn"><code>component ForgotPasswordForm &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/form-actions.wrn b/app/pages/components/form-actions.wrn
new file mode 100644
index 00000000..2246f878
--- /dev/null
+++ b/app/pages/components/form-actions.wrn
@@ -0,0 +1,32 @@
+page FormActionscomponent {
+  seo {
+    title = "FormActions component"
+    description = "Reusable form actions component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FormActions</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>FormActions</h1><p>Reusable form actions component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FormActions label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FormActions&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FormActions.wrn</code></p><pre data-language="wrn"><code>component FormActions &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/form-alert.wrn b/app/pages/components/form-alert.wrn
new file mode 100644
index 00000000..87e15778
--- /dev/null
+++ b/app/pages/components/form-alert.wrn
@@ -0,0 +1,32 @@
+page FormAlertcomponent {
+  seo {
+    title = "FormAlert component"
+    description = "Reusable form alert component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FormAlert</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>FormAlert</h1><p>Reusable form alert component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FormAlert label=&quot;Form&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FormAlert&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Form&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FormAlert.wrn</code></p><pre data-language="wrn"><code>component FormAlert &#123;
+  props &#123;
+    label = &quot;Form&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/form-dialog.wrn b/app/pages/components/form-dialog.wrn
new file mode 100644
index 00000000..49630825
--- /dev/null
+++ b/app/pages/components/form-dialog.wrn
@@ -0,0 +1,31 @@
+page FormDialogcomponent {
+  seo {
+    title = "FormDialog component"
+    description = "Reusable form dialog component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FormDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>FormDialog</h1><p>Reusable form dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FormDialog title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FormDialog&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FormDialog.wrn</code></p><pre data-language="wrn"><code>component FormDialog &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/form-error-summary.wrn b/app/pages/components/form-error-summary.wrn
new file mode 100644
index 00000000..0f372c6f
--- /dev/null
+++ b/app/pages/components/form-error-summary.wrn
@@ -0,0 +1,31 @@
+page FormErrorSummarycomponent {
+  seo {
+    title = "FormErrorSummary component"
+    description = "Reusable form error summary component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FormErrorSummary</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>FormErrorSummary</h1><p>Reusable form error summary component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FormErrorSummary title=&quot;Please fix the following&quot; visible=&quot;true&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FormErrorSummary&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Please fix the following&quot;</code></td></tr><tr><td><code>visible</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FormErrorSummary.wrn</code></p><pre data-language="wrn"><code>component FormErrorSummary &#123;
+  props &#123;
+    class = &quot;&quot;
+    title = &quot;Please fix the following&quot;
+    visible = true
+  &#125;
+  view &#123;
+    &lt;section data-show=&quot;visible&quot; role=&quot;alert&quot; aria-live=&quot;polite&quot; class=&quot;rounded-2xl border border-red-200 bg-red-50 p-4 text-red-900 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200 &#123;class&#125;&quot;&gt;&lt;h3 class=&quot;font-semibold&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;div class=&quot;mt-2 text-sm&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;/section&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/form-error.wrn b/app/pages/components/form-error.wrn
new file mode 100644
index 00000000..34464b95
--- /dev/null
+++ b/app/pages/components/form-error.wrn
@@ -0,0 +1,29 @@
+page FormErrorcomponent {
+  seo {
+    title = "FormError component"
+    description = "Reusable form error component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FormError</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>FormError</h1><p>Reusable form error component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FormError id=&quot;id&quot; message=&quot;message&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FormError&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>message</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FormError.wrn</code></p><pre data-language="wrn"><code>component FormError &#123;
+  props &#123;
+    id = &quot;&quot;
+    message = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;p id=&quot;&#123;id&#125;&quot; role=&quot;alert&quot; aria-live=&quot;polite&quot; class=&quot;wire-field-message wire-field-message--error &#123;class&#125;&quot;&gt;&#123;message&#125;&lt;slot /&gt;&lt;/p&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/form-field.wrn b/app/pages/components/form-field.wrn
new file mode 100644
index 00000000..abb34c69
--- /dev/null
+++ b/app/pages/components/form-field.wrn
@@ -0,0 +1,33 @@
+page FormFieldcomponent {
+  seo {
+    title = "FormField component"
+    description = "Reusable form field component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FormField</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>FormField</h1><p>Reusable form field component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FormField label=&quot;Field&quot; help=&quot;help&quot; error=&quot;error&quot; required=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FormField&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Field&quot;</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FormField.wrn</code></p><pre data-language="wrn"><code>component FormField &#123;
+  props &#123;
+    class = &quot;&quot;
+    label = &quot;Field&quot;
+    help = &quot;&quot;
+    error = &quot;&quot;
+    required = false
+  &#125;
+  view &#123;
+    &lt;div class=&quot;space-y-2 &#123;class&#125;&quot;&gt;&lt;div class=&quot;text-sm font-semibold&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;ml-1 text-red-500&quot;&gt;*&lt;/span&gt;&lt;/div&gt;&lt;slot /&gt;&lt;p data-show=&quot;help &amp;&amp; !error&quot; class=&quot;text-sm text-slate-500&quot;&gt;&#123;help&#125;&lt;/p&gt;&lt;p data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;text-sm font-medium text-red-600&quot;&gt;&#123;error&#125;&lt;/p&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/form-grid.wrn b/app/pages/components/form-grid.wrn
new file mode 100644
index 00000000..cd248b36
--- /dev/null
+++ b/app/pages/components/form-grid.wrn
@@ -0,0 +1,31 @@
+page FormGridcomponent {
+  seo {
+    title = "FormGrid component"
+    description = "Reusable form grid component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FormGrid</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>FormGrid</h1><p>Reusable form grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FormGrid title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FormGrid&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FormGrid.wrn</code></p><pre data-language="wrn"><code>component FormGrid &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/form-group.wrn b/app/pages/components/form-group.wrn
new file mode 100644
index 00000000..7e057fbf
--- /dev/null
+++ b/app/pages/components/form-group.wrn
@@ -0,0 +1,37 @@
+page FormGroupcomponent {
+  seo {
+    title = "FormGroup component"
+    description = "Reusable form group component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FormGroup</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>FormGroup</h1><p>Reusable form group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FormGroup label=&quot;Form&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FormGroup&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Form&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FormGroup.wrn</code></p><pre data-language="wrn"><code>component FormGroup &#123;
+  props &#123;
+    label = &quot;Form&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/form-help-text.wrn b/app/pages/components/form-help-text.wrn
new file mode 100644
index 00000000..a8c4346b
--- /dev/null
+++ b/app/pages/components/form-help-text.wrn
@@ -0,0 +1,29 @@
+page FormHelpTextcomponent {
+  seo {
+    title = "FormHelpText component"
+    description = "Reusable form help text component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FormHelpText</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>FormHelpText</h1><p>Reusable form help text component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FormHelpText id=&quot;id&quot; text=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FormHelpText&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>text</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FormHelpText.wrn</code></p><pre data-language="wrn"><code>component FormHelpText &#123;
+  props &#123;
+    id = &quot;&quot;
+    text = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;p id=&quot;&#123;id&#125;&quot; class=&quot;wire-field-message wire-field-message--help &#123;class&#125;&quot;&gt;&#123;text&#125;&lt;slot /&gt;&lt;/p&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/form-label.wrn b/app/pages/components/form-label.wrn
new file mode 100644
index 00000000..1f573a74
--- /dev/null
+++ b/app/pages/components/form-label.wrn
@@ -0,0 +1,33 @@
+page FormLabelcomponent {
+  seo {
+    title = "FormLabel component"
+    description = "Reusable form label component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FormLabel</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>FormLabel</h1><p>Reusable form label component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FormLabel for=&quot;for&quot; label=&quot;Label&quot; required=&quot;false&quot; optional=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FormLabel&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>for</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Label&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>optional</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FormLabel.wrn</code></p><pre data-language="wrn"><code>component FormLabel &#123;
+  props &#123;
+    for = &quot;&quot;
+    label = &quot;Label&quot;
+    required = false
+    optional = false
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;label for=&quot;&#123;for&#125;&quot; class=&quot;wire-label &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot; aria-hidden=&quot;true&quot;&gt; *&lt;/span&gt;&lt;span data-show=&quot;optional &amp;&amp; !required&quot; class=&quot;wire-optional&quot;&gt; (optional)&lt;/span&gt;&lt;/label&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/form-progress.wrn b/app/pages/components/form-progress.wrn
new file mode 100644
index 00000000..fa335230
--- /dev/null
+++ b/app/pages/components/form-progress.wrn
@@ -0,0 +1,32 @@
+page FormProgresscomponent {
+  seo {
+    title = "FormProgress component"
+    description = "Reusable form progress component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FormProgress</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>FormProgress</h1><p>Reusable form progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FormProgress title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FormProgress&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FormProgress.wrn</code></p><pre data-language="wrn"><code>component FormProgress &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/form-row.wrn b/app/pages/components/form-row.wrn
new file mode 100644
index 00000000..698e41ec
--- /dev/null
+++ b/app/pages/components/form-row.wrn
@@ -0,0 +1,31 @@
+page FormRowcomponent {
+  seo {
+    title = "FormRow component"
+    description = "Reusable form row component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FormRow</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>FormRow</h1><p>Reusable form row component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FormRow title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FormRow&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FormRow.wrn</code></p><pre data-language="wrn"><code>component FormRow &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/form-section.wrn b/app/pages/components/form-section.wrn
new file mode 100644
index 00000000..18a57a3d
--- /dev/null
+++ b/app/pages/components/form-section.wrn
@@ -0,0 +1,31 @@
+page FormSectioncomponent {
+  seo {
+    title = "FormSection component"
+    description = "Reusable form section component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FormSection</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>FormSection</h1><p>Reusable form section component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FormSection eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FormSection&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FormSection.wrn</code></p><pre data-language="wrn"><code>component FormSection &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/form.wrn b/app/pages/components/form.wrn
new file mode 100644
index 00000000..fcb19b4d
--- /dev/null
+++ b/app/pages/components/form.wrn
@@ -0,0 +1,33 @@
+page Formcomponent {
+  seo {
+    title = "Form component"
+    description = "Reusable form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Form</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>Form</h1><p>Reusable form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Form action=&quot;action&quot; method=&quot;post&quot; name=&quot;name&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Form&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>action</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>method</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;post&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Form.wrn</code></p><pre data-language="wrn"><code>component Form &#123;
+  props &#123;
+    action = &quot;&quot;
+    method = &quot;post&quot;
+    name = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;form action=&quot;&#123;action&#125;&quot; method=&quot;&#123;method&#125;&quot; name=&quot;&#123;name&#125;&quot; aria-busy=&quot;&#123;loading&#125;&quot; class=&quot;wire-form &#123;class&#125;&quot;&gt;&lt;slot /&gt;&lt;/form&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/full-bleed.wrn b/app/pages/components/full-bleed.wrn
new file mode 100644
index 00000000..62b641da
--- /dev/null
+++ b/app/pages/components/full-bleed.wrn
@@ -0,0 +1,27 @@
+page FullBleedcomponent {
+  seo {
+    title = "FullBleed component"
+    description = "Reusable full bleed component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FullBleed</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>FullBleed</h1><p>Reusable full bleed component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FullBleed /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FullBleed&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FullBleed.wrn</code></p><pre data-language="wrn"><code>component FullBleed &#123;
+  props &#123;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-full-bleed &#123;class&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/fullscreen-dialog.wrn b/app/pages/components/fullscreen-dialog.wrn
new file mode 100644
index 00000000..e5704074
--- /dev/null
+++ b/app/pages/components/fullscreen-dialog.wrn
@@ -0,0 +1,31 @@
+page FullscreenDialogcomponent {
+  seo {
+    title = "FullscreenDialog component"
+    description = "Reusable fullscreen dialog component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FullscreenDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>FullscreenDialog</h1><p>Reusable fullscreen dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FullscreenDialog title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FullscreenDialog&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FullscreenDialog.wrn</code></p><pre data-language="wrn"><code>component FullscreenDialog &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/funnel-chart.wrn b/app/pages/components/funnel-chart.wrn
new file mode 100644
index 00000000..f8f04136
--- /dev/null
+++ b/app/pages/components/funnel-chart.wrn
@@ -0,0 +1,32 @@
+page FunnelChartcomponent {
+  seo {
+    title = "FunnelChart component"
+    description = "Reusable funnel chart component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FunnelChart</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>FunnelChart</h1><p>Reusable funnel chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FunnelChart title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FunnelChart&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FunnelChart.wrn</code></p><pre data-language="wrn"><code>component FunnelChart &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/geo-chart.wrn b/app/pages/components/geo-chart.wrn
new file mode 100644
index 00000000..320371dd
--- /dev/null
+++ b/app/pages/components/geo-chart.wrn
@@ -0,0 +1,32 @@
+page GeoChartcomponent {
+  seo {
+    title = "GeoChart component"
+    description = "Reusable geo chart component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">GeoChart</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>GeoChart</h1><p>Reusable geo chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;GeoChart title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;GeoChart&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/GeoChart.wrn</code></p><pre data-language="wrn"><code>component GeoChart &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/geofence-editor.wrn b/app/pages/components/geofence-editor.wrn
new file mode 100644
index 00000000..ed25fee4
--- /dev/null
+++ b/app/pages/components/geofence-editor.wrn
@@ -0,0 +1,37 @@
+page GeofenceEditorcomponent {
+  seo {
+    title = "GeofenceEditor component"
+    description = "Reusable geofence editor component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">GeofenceEditor</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>GeofenceEditor</h1><p>Reusable geofence editor component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;GeofenceEditor label=&quot;Geofence&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;GeofenceEditor&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Geofence&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/GeofenceEditor.wrn</code></p><pre data-language="wrn"><code>component GeofenceEditor &#123;
+  props &#123;
+    label = &quot;Geofence&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/ghost-button.wrn b/app/pages/components/ghost-button.wrn
new file mode 100644
index 00000000..348d0d50
--- /dev/null
+++ b/app/pages/components/ghost-button.wrn
@@ -0,0 +1,30 @@
+page GhostButtoncomponent {
+  seo {
+    title = "GhostButton component"
+    description = "Reusable ghost button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">GhostButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>GhostButton</h1><p>Reusable ghost button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;GhostButton label=&quot;Action&quot; type=&quot;button&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;GhostButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/GhostButton.wrn</code></p><pre data-language="wrn"><code>component GhostButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    type = &quot;button&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;button type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--ghost &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/glass-card.wrn b/app/pages/components/glass-card.wrn
new file mode 100644
index 00000000..1909bb14
--- /dev/null
+++ b/app/pages/components/glass-card.wrn
@@ -0,0 +1,30 @@
+page GlassCardcomponent {
+  seo {
+    title = "GlassCard component"
+    description = "Reusable glass card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">GlassCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>GlassCard</h1><p>Reusable glass card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;GlassCard title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;GlassCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/GlassCard.wrn</code></p><pre data-language="wrn"><code>component GlassCard &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card wire-catalog-card--glass &#123;class&#125;&quot;&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-catalog-card__link&quot;&gt;&lt;span class=&quot;wire-visually-hidden&quot;&gt;Open &#123;title&#125;&lt;/span&gt;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/global-search.wrn b/app/pages/components/global-search.wrn
new file mode 100644
index 00000000..9935ffaa
--- /dev/null
+++ b/app/pages/components/global-search.wrn
@@ -0,0 +1,34 @@
+page GlobalSearchcomponent {
+  seo {
+    title = "GlobalSearch component"
+    description = "Reusable global search component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">GlobalSearch</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>GlobalSearch</h1><p>Reusable global search component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;GlobalSearch eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;GlobalSearch&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/GlobalSearch.wrn</code></p><pre data-language="wrn"><code>component GlobalSearch &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/gradient-cta.wrn b/app/pages/components/gradient-cta.wrn
new file mode 100644
index 00000000..9702cb20
--- /dev/null
+++ b/app/pages/components/gradient-cta.wrn
@@ -0,0 +1,32 @@
+page GradientCTAcomponent {
+  seo {
+    title = "GradientCTA component"
+    description = "Reusable gradient c t a component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">GradientCTA</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>GradientCTA</h1><p>Reusable gradient c t a component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;GradientCTA label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;GradientCTA&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/GradientCTA.wrn</code></p><pre data-language="wrn"><code>component GradientCTA &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/gradient-picker.wrn b/app/pages/components/gradient-picker.wrn
new file mode 100644
index 00000000..718478e5
--- /dev/null
+++ b/app/pages/components/gradient-picker.wrn
@@ -0,0 +1,37 @@
+page GradientPickercomponent {
+  seo {
+    title = "GradientPicker component"
+    description = "Reusable gradient picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">GradientPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>GradientPicker</h1><p>Reusable gradient picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;GradientPicker label=&quot;Gradient&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;GradientPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Gradient&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/GradientPicker.wrn</code></p><pre data-language="wrn"><code>component GradientPicker &#123;
+  props &#123;
+    label = &quot;Gradient&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/gradient-stop-editor.wrn b/app/pages/components/gradient-stop-editor.wrn
new file mode 100644
index 00000000..fcb95599
--- /dev/null
+++ b/app/pages/components/gradient-stop-editor.wrn
@@ -0,0 +1,37 @@
+page GradientStopEditorcomponent {
+  seo {
+    title = "GradientStopEditor component"
+    description = "Reusable gradient stop editor component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">GradientStopEditor</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>GradientStopEditor</h1><p>Reusable gradient stop editor component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;GradientStopEditor label=&quot;GradientStop&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;GradientStopEditor&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;GradientStop&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/GradientStopEditor.wrn</code></p><pre data-language="wrn"><code>component GradientStopEditor &#123;
+  props &#123;
+    label = &quot;GradientStop&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/grid.wrn b/app/pages/components/grid.wrn
new file mode 100644
index 00000000..5bd9ce23
--- /dev/null
+++ b/app/pages/components/grid.wrn
@@ -0,0 +1,30 @@
+page Gridcomponent {
+  seo {
+    title = "Grid component"
+    description = "Reusable grid component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Grid</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>Grid</h1><p>Reusable grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>2 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Grid gap=&quot;4&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Grid&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;4&quot;</code></td></tr><tr><td><code>className</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Grid.wrn</code></p><pre data-language="wrn"><code>component Grid &#123;
+  props &#123;
+    gap = &quot;4&quot;
+    className = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;grid gap-&#123;gap&#125; &#123;className&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/guide-card.wrn b/app/pages/components/guide-card.wrn
new file mode 100644
index 00000000..774fc340
--- /dev/null
+++ b/app/pages/components/guide-card.wrn
@@ -0,0 +1,34 @@
+page GuideCardcomponent {
+  seo {
+    title = "GuideCard component"
+    description = "Reusable guide card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">GuideCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>GuideCard</h1><p>Reusable guide card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;GuideCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;GuideCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/GuideCard.wrn</code></p><pre data-language="wrn"><code>component GuideCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/guide-checklist.wrn b/app/pages/components/guide-checklist.wrn
new file mode 100644
index 00000000..e766784f
--- /dev/null
+++ b/app/pages/components/guide-checklist.wrn
@@ -0,0 +1,34 @@
+page GuideChecklistcomponent {
+  seo {
+    title = "GuideChecklist component"
+    description = "Reusable guide checklist component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">GuideChecklist</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>GuideChecklist</h1><p>Reusable guide checklist component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;GuideChecklist eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;GuideChecklist&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/GuideChecklist.wrn</code></p><pre data-language="wrn"><code>component GuideChecklist &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/guide-difficulty-badge.wrn b/app/pages/components/guide-difficulty-badge.wrn
new file mode 100644
index 00000000..b84d84cc
--- /dev/null
+++ b/app/pages/components/guide-difficulty-badge.wrn
@@ -0,0 +1,32 @@
+page GuideDifficultyBadgecomponent {
+  seo {
+    title = "GuideDifficultyBadge component"
+    description = "Reusable guide difficulty badge component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">GuideDifficultyBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>GuideDifficultyBadge</h1><p>Reusable guide difficulty badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;GuideDifficultyBadge label=&quot;GuideDifficulty&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;GuideDifficultyBadge&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;GuideDifficulty&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/GuideDifficultyBadge.wrn</code></p><pre data-language="wrn"><code>component GuideDifficultyBadge &#123;
+  props &#123;
+    label = &quot;GuideDifficulty&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/guide-grid.wrn b/app/pages/components/guide-grid.wrn
new file mode 100644
index 00000000..aebb0341
--- /dev/null
+++ b/app/pages/components/guide-grid.wrn
@@ -0,0 +1,31 @@
+page GuideGridcomponent {
+  seo {
+    title = "GuideGrid component"
+    description = "Reusable guide grid component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">GuideGrid</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>GuideGrid</h1><p>Reusable guide grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;GuideGrid title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;GuideGrid&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/GuideGrid.wrn</code></p><pre data-language="wrn"><code>component GuideGrid &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/guide-step.wrn b/app/pages/components/guide-step.wrn
new file mode 100644
index 00000000..64a56e8b
--- /dev/null
+++ b/app/pages/components/guide-step.wrn
@@ -0,0 +1,34 @@
+page GuideStepcomponent {
+  seo {
+    title = "GuideStep component"
+    description = "Reusable guide step component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">GuideStep</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>GuideStep</h1><p>Reusable guide step component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;GuideStep eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;GuideStep&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/GuideStep.wrn</code></p><pre data-language="wrn"><code>component GuideStep &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/header-actions.wrn b/app/pages/components/header-actions.wrn
new file mode 100644
index 00000000..a9000a2f
--- /dev/null
+++ b/app/pages/components/header-actions.wrn
@@ -0,0 +1,32 @@
+page HeaderActionscomponent {
+  seo {
+    title = "HeaderActions component"
+    description = "Reusable header actions component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">HeaderActions</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>HeaderActions</h1><p>Reusable header actions component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;HeaderActions label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;HeaderActions&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/HeaderActions.wrn</code></p><pre data-language="wrn"><code>component HeaderActions &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/header.wrn b/app/pages/components/header.wrn
new file mode 100644
index 00000000..e6bcd86f
--- /dev/null
+++ b/app/pages/components/header.wrn
@@ -0,0 +1,31 @@
+page Headercomponent {
+  seo {
+    title = "Header component"
+    description = "Reusable header component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Header</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Header</h1><p>Reusable header component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Header eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Header&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Header.wrn</code></p><pre data-language="wrn"><code>component Header &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/health-indicator.wrn b/app/pages/components/health-indicator.wrn
new file mode 100644
index 00000000..a243e14c
--- /dev/null
+++ b/app/pages/components/health-indicator.wrn
@@ -0,0 +1,29 @@
+page HealthIndicatorcomponent {
+  seo {
+    title = "HealthIndicator component"
+    description = "Reusable health indicator component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">HealthIndicator</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>HealthIndicator</h1><p>Reusable health indicator component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;HealthIndicator label=&quot;Health&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;HealthIndicator&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Health&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/HealthIndicator.wrn</code></p><pre data-language="wrn"><code>component HealthIndicator &#123;
+  props &#123;
+    label = &quot;Health&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-badge wire-badge--&#123;variant&#125; wire-catalog-badge wire-catalog-badge--healthindicator &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/hero-actions.wrn b/app/pages/components/hero-actions.wrn
new file mode 100644
index 00000000..d33ed724
--- /dev/null
+++ b/app/pages/components/hero-actions.wrn
@@ -0,0 +1,32 @@
+page HeroActionscomponent {
+  seo {
+    title = "HeroActions component"
+    description = "Reusable hero actions component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">HeroActions</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>HeroActions</h1><p>Reusable hero actions component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;HeroActions label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;HeroActions&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/HeroActions.wrn</code></p><pre data-language="wrn"><code>component HeroActions &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/hero-code-panel.wrn b/app/pages/components/hero-code-panel.wrn
new file mode 100644
index 00000000..1eff400b
--- /dev/null
+++ b/app/pages/components/hero-code-panel.wrn
@@ -0,0 +1,31 @@
+page HeroCodePanelcomponent {
+  seo {
+    title = "HeroCodePanel component"
+    description = "Reusable hero code panel component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">HeroCodePanel</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>HeroCodePanel</h1><p>Reusable hero code panel component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;HeroCodePanel eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;HeroCodePanel&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/HeroCodePanel.wrn</code></p><pre data-language="wrn"><code>component HeroCodePanel &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/hero-gradient-text.wrn b/app/pages/components/hero-gradient-text.wrn
new file mode 100644
index 00000000..39b65ece
--- /dev/null
+++ b/app/pages/components/hero-gradient-text.wrn
@@ -0,0 +1,34 @@
+page HeroGradientTextcomponent {
+  seo {
+    title = "HeroGradientText component"
+    description = "Reusable hero gradient text component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">HeroGradientText</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>HeroGradientText</h1><p>Reusable hero gradient text component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;HeroGradientText eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;HeroGradientText&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/HeroGradientText.wrn</code></p><pre data-language="wrn"><code>component HeroGradientText &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/hero-primary-action.wrn b/app/pages/components/hero-primary-action.wrn
new file mode 100644
index 00000000..d59369ee
--- /dev/null
+++ b/app/pages/components/hero-primary-action.wrn
@@ -0,0 +1,32 @@
+page HeroPrimaryActioncomponent {
+  seo {
+    title = "HeroPrimaryAction component"
+    description = "Reusable hero primary action component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">HeroPrimaryAction</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>HeroPrimaryAction</h1><p>Reusable hero primary action component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;HeroPrimaryAction label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;HeroPrimaryAction&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/HeroPrimaryAction.wrn</code></p><pre data-language="wrn"><code>component HeroPrimaryAction &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/hero-product-preview.wrn b/app/pages/components/hero-product-preview.wrn
new file mode 100644
index 00000000..5ccb8ad8
--- /dev/null
+++ b/app/pages/components/hero-product-preview.wrn
@@ -0,0 +1,34 @@
+page HeroProductPreviewcomponent {
+  seo {
+    title = "HeroProductPreview component"
+    description = "Reusable hero product preview component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">HeroProductPreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>HeroProductPreview</h1><p>Reusable hero product preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;HeroProductPreview eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;HeroProductPreview&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/HeroProductPreview.wrn</code></p><pre data-language="wrn"><code>component HeroProductPreview &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/hero-secondary-action.wrn b/app/pages/components/hero-secondary-action.wrn
new file mode 100644
index 00000000..3517c607
--- /dev/null
+++ b/app/pages/components/hero-secondary-action.wrn
@@ -0,0 +1,32 @@
+page HeroSecondaryActioncomponent {
+  seo {
+    title = "HeroSecondaryAction component"
+    description = "Reusable hero secondary action component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">HeroSecondaryAction</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>HeroSecondaryAction</h1><p>Reusable hero secondary action component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;HeroSecondaryAction label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;HeroSecondaryAction&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/HeroSecondaryAction.wrn</code></p><pre data-language="wrn"><code>component HeroSecondaryAction &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/hero-trust-text.wrn b/app/pages/components/hero-trust-text.wrn
new file mode 100644
index 00000000..c5585ef7
--- /dev/null
+++ b/app/pages/components/hero-trust-text.wrn
@@ -0,0 +1,34 @@
+page HeroTrustTextcomponent {
+  seo {
+    title = "HeroTrustText component"
+    description = "Reusable hero trust text component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">HeroTrustText</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>HeroTrustText</h1><p>Reusable hero trust text component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;HeroTrustText eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;HeroTrustText&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/HeroTrustText.wrn</code></p><pre data-language="wrn"><code>component HeroTrustText &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/hero.wrn b/app/pages/components/hero.wrn
new file mode 100644
index 00000000..0e8969cf
--- /dev/null
+++ b/app/pages/components/hero.wrn
@@ -0,0 +1,38 @@
+page Herocomponent {
+  seo {
+    title = "Hero component"
+    description = "Reusable hero component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Hero</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Hero</h1><p>Reusable hero component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>10 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Hero eyebrow=&quot;eyebrow&quot; title=&quot;Build faster with WRNexusJS&quot; highlight=&quot;highlight&quot; description=&quot;description&quot; primaryLabel=&quot;Get started&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Hero&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Build faster with WRNexusJS&quot;</code></td></tr><tr><td><code>highlight</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>primaryLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Get started&quot;</code></td></tr><tr><td><code>primaryHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;#&quot;</code></td></tr><tr><td><code>secondaryLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>secondaryHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;#&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;center&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Hero.wrn</code></p><pre data-language="wrn"><code>component Hero &#123;
+  props &#123;
+    class = &quot;&quot;
+    eyebrow = &quot;&quot;
+    title = &quot;Build faster with WRNexusJS&quot;
+    highlight = &quot;&quot;
+    description = &quot;&quot;
+    primaryLabel = &quot;Get started&quot;
+    primaryHref = &quot;#&quot;
+    secondaryLabel = &quot;Learn more&quot;
+    secondaryHref = &quot;#&quot;
+    align = &quot;center&quot;
+  &#125;
+  view &#123;
+    &lt;section class=&quot;relative isolate overflow-hidden &#123;class&#125;&quot;&gt;&lt;div class=&quot;absolute inset-0 -z-10 bg-[radial-gradient(circle_at_top,rgba(124,58,237,.18),transparent_45%)]&quot;&gt;&lt;/div&gt;&lt;div class=&quot;mx-auto max-w-7xl px-4 sm:px-6 lg:px-8&quot;&gt;&lt;div class=&quot;max-w-4xl &#123;align === 'center' ? 'mx-auto text-center' : ''&#125;&quot;&gt;&lt;Badge data-show=&quot;eyebrow&quot; label=&quot;&#123;eyebrow&#125;&quot; variant=&quot;brand&quot; /&gt;&lt;h1 class=&quot;mt-6 text-4xl font-black tracking-tight text-slate-950 sm:text-6xl dark:text-white&quot;&gt;&#123;title&#125; &lt;span data-show=&quot;highlight&quot; class=&quot;bg-gradient-to-r from-violet-600 to-fuchsia-500 bg-clip-text text-transparent&quot;&gt;&#123;highlight&#125;&lt;/span&gt;&lt;/h1&gt;&lt;p data-show=&quot;description&quot; class=&quot;mt-6 text-lg leading-8 text-slate-600 sm:text-xl dark:text-slate-300&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;div class=&quot;mt-8 flex flex-wrap gap-3 &#123;align === 'center' ? 'justify-center' : ''&#125;&quot;&gt;&lt;a href=&quot;&#123;primaryHref&#125;&quot; class=&quot;inline-flex min-h-12 items-center rounded-xl bg-violet-600 px-5 font-semibold text-white shadow-lg shadow-violet-600/20 transition hover:-translate-y-0.5 hover:bg-violet-700&quot;&gt;&#123;primaryLabel&#125;&lt;/a&gt;&lt;a data-show=&quot;secondaryLabel&quot; href=&quot;&#123;secondaryHref&#125;&quot; class=&quot;inline-flex min-h-12 items-center rounded-xl border border-slate-300 bg-white px-5 font-semibold text-slate-900 transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-white&quot;&gt;&#123;secondaryLabel&#125;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;mt-10&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/hex-color-input.wrn b/app/pages/components/hex-color-input.wrn
new file mode 100644
index 00000000..a6cec177
--- /dev/null
+++ b/app/pages/components/hex-color-input.wrn
@@ -0,0 +1,37 @@
+page HexColorInputcomponent {
+  seo {
+    title = "HexColorInput component"
+    description = "Reusable hex color input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">HexColorInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>HexColorInput</h1><p>Reusable hex color input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;HexColorInput label=&quot;HexColor&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;HexColorInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;HexColor&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/HexColorInput.wrn</code></p><pre data-language="wrn"><code>component HexColorInput &#123;
+  props &#123;
+    label = &quot;HexColor&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/hidden-field.wrn b/app/pages/components/hidden-field.wrn
new file mode 100644
index 00000000..6543e12b
--- /dev/null
+++ b/app/pages/components/hidden-field.wrn
@@ -0,0 +1,37 @@
+page HiddenFieldcomponent {
+  seo {
+    title = "HiddenField component"
+    description = "Reusable hidden field component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">HiddenField</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>HiddenField</h1><p>Reusable hidden field component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;HiddenField label=&quot;Hidden&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;HiddenField&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Hidden&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/HiddenField.wrn</code></p><pre data-language="wrn"><code>component HiddenField &#123;
+  props &#123;
+    label = &quot;Hidden&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/highlight-text.wrn b/app/pages/components/highlight-text.wrn
new file mode 100644
index 00000000..83827e87
--- /dev/null
+++ b/app/pages/components/highlight-text.wrn
@@ -0,0 +1,34 @@
+page HighlightTextcomponent {
+  seo {
+    title = "HighlightText component"
+    description = "Reusable highlight text component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">HighlightText</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>HighlightText</h1><p>Reusable highlight text component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;HighlightText eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;HighlightText&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/HighlightText.wrn</code></p><pre data-language="wrn"><code>component HighlightText &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/holiday-calendar.wrn b/app/pages/components/holiday-calendar.wrn
new file mode 100644
index 00000000..bc3ab6b1
--- /dev/null
+++ b/app/pages/components/holiday-calendar.wrn
@@ -0,0 +1,34 @@
+page HolidayCalendarcomponent {
+  seo {
+    title = "HolidayCalendar component"
+    description = "Reusable holiday calendar component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">HolidayCalendar</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>HolidayCalendar</h1><p>Reusable holiday calendar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;HolidayCalendar eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;HolidayCalendar&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/HolidayCalendar.wrn</code></p><pre data-language="wrn"><code>component HolidayCalendar &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/hostname-input.wrn b/app/pages/components/hostname-input.wrn
new file mode 100644
index 00000000..53f31eb4
--- /dev/null
+++ b/app/pages/components/hostname-input.wrn
@@ -0,0 +1,37 @@
+page HostnameInputcomponent {
+  seo {
+    title = "HostnameInput component"
+    description = "Reusable hostname input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">HostnameInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>HostnameInput</h1><p>Reusable hostname input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;HostnameInput label=&quot;Hostname&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;HostnameInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Hostname&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/HostnameInput.wrn</code></p><pre data-language="wrn"><code>component HostnameInput &#123;
+  props &#123;
+    label = &quot;Hostname&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/hour-picker.wrn b/app/pages/components/hour-picker.wrn
new file mode 100644
index 00000000..cbf3fbfb
--- /dev/null
+++ b/app/pages/components/hour-picker.wrn
@@ -0,0 +1,37 @@
+page HourPickercomponent {
+  seo {
+    title = "HourPicker component"
+    description = "Reusable hour picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">HourPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>HourPicker</h1><p>Reusable hour picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;HourPicker label=&quot;Hour&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;HourPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Hour&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/HourPicker.wrn</code></p><pre data-language="wrn"><code>component HourPicker &#123;
+  props &#123;
+    label = &quot;Hour&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/hsl-color-input.wrn b/app/pages/components/hsl-color-input.wrn
new file mode 100644
index 00000000..5f4f7ae7
--- /dev/null
+++ b/app/pages/components/hsl-color-input.wrn
@@ -0,0 +1,37 @@
+page HslColorInputcomponent {
+  seo {
+    title = "HslColorInput component"
+    description = "Reusable hsl color input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">HslColorInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>HslColorInput</h1><p>Reusable hsl color input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;HslColorInput label=&quot;HslColor&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;HslColorInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;HslColor&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/HslColorInput.wrn</code></p><pre data-language="wrn"><code>component HslColorInput &#123;
+  props &#123;
+    label = &quot;HslColor&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/hstack.wrn b/app/pages/components/hstack.wrn
new file mode 100644
index 00000000..823e6006
--- /dev/null
+++ b/app/pages/components/hstack.wrn
@@ -0,0 +1,33 @@
+page hstackcomponent {
+  seo {
+    title = "hstack component"
+    description = "Reusable hstack component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">hstack</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>hstack</h1><p>Reusable hstack component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;hstack gap=&quot;4&quot; align=&quot;center&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;hstack&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;4&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;center&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/hstack.wrn</code></p><pre data-language="wrn"><code>// Horizontal stack: row layout with a gap and cross-axis alignment.
+// align: start | center | end | stretch
+component HStack &#123;
+  props &#123;
+    gap = &quot;4&quot;
+    align = &quot;center&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;wire-hstack wire-gap-&#123;gap&#125; wire-items-&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/html-editor.wrn b/app/pages/components/html-editor.wrn
new file mode 100644
index 00000000..bf5283a0
--- /dev/null
+++ b/app/pages/components/html-editor.wrn
@@ -0,0 +1,37 @@
+page HtmlEditorcomponent {
+  seo {
+    title = "HtmlEditor component"
+    description = "Reusable html editor component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">HtmlEditor</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>HtmlEditor</h1><p>Reusable html editor component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;HtmlEditor label=&quot;Html&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;HtmlEditor&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Html&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/HtmlEditor.wrn</code></p><pre data-language="wrn"><code>component HtmlEditor &#123;
+  props &#123;
+    label = &quot;Html&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/human-approval-step.wrn b/app/pages/components/human-approval-step.wrn
new file mode 100644
index 00000000..0e04c15c
--- /dev/null
+++ b/app/pages/components/human-approval-step.wrn
@@ -0,0 +1,34 @@
+page HumanApprovalStepcomponent {
+  seo {
+    title = "HumanApprovalStep component"
+    description = "Reusable human approval step component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">HumanApprovalStep</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>HumanApprovalStep</h1><p>Reusable human approval step component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;HumanApprovalStep eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;HumanApprovalStep&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/HumanApprovalStep.wrn</code></p><pre data-language="wrn"><code>component HumanApprovalStep &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/icon-button.wrn b/app/pages/components/icon-button.wrn
new file mode 100644
index 00000000..0bf2af66
--- /dev/null
+++ b/app/pages/components/icon-button.wrn
@@ -0,0 +1,31 @@
+page IconButtoncomponent {
+  seo {
+    title = "IconButton component"
+    description = "Reusable icon button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">IconButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>IconButton</h1><p>Reusable icon button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;IconButton label=&quot;Action&quot; icon=&quot;•&quot; variant=&quot;ghost&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;IconButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;•&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;ghost&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/IconButton.wrn</code></p><pre data-language="wrn"><code>component IconButton &#123;
+  props &#123;
+    class = &quot;&quot;
+    label = &quot;Action&quot;
+    icon = &quot;•&quot;
+    variant = &quot;ghost&quot;
+    disabled = false
+  &#125;
+  view &#123; &lt;button type=&quot;button&quot; aria-label=&quot;&#123;label&#125;&quot; title=&quot;&#123;label&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;inline-flex size-11 items-center justify-center rounded-xl transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 disabled:opacity-50 &#123;variant === 'primary' ? 'bg-violet-600 text-white hover:bg-violet-700' : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800'&#125; &#123;class&#125;&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;&#123;icon&#125;&lt;/span&gt;&lt;/button&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/icon-picker.wrn b/app/pages/components/icon-picker.wrn
new file mode 100644
index 00000000..b306344d
--- /dev/null
+++ b/app/pages/components/icon-picker.wrn
@@ -0,0 +1,37 @@
+page IconPickercomponent {
+  seo {
+    title = "IconPicker component"
+    description = "Reusable icon picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">IconPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>IconPicker</h1><p>Reusable icon picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;IconPicker label=&quot;Icon&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;IconPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Icon&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/IconPicker.wrn</code></p><pre data-language="wrn"><code>component IconPicker &#123;
+  props &#123;
+    label = &quot;Icon&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/icon-selector.wrn b/app/pages/components/icon-selector.wrn
new file mode 100644
index 00000000..800e1e91
--- /dev/null
+++ b/app/pages/components/icon-selector.wrn
@@ -0,0 +1,37 @@
+page IconSelectorcomponent {
+  seo {
+    title = "IconSelector component"
+    description = "Reusable icon selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">IconSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>IconSelector</h1><p>Reusable icon selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;IconSelector label=&quot;Icon&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;IconSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Icon&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/IconSelector.wrn</code></p><pre data-language="wrn"><code>component IconSelector &#123;
+  props &#123;
+    label = &quot;Icon&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/icon.wrn b/app/pages/components/icon.wrn
new file mode 100644
index 00000000..fc7cc5e0
--- /dev/null
+++ b/app/pages/components/icon.wrn
@@ -0,0 +1,34 @@
+page Iconcomponent {
+  seo {
+    title = "Icon component"
+    description = "Reusable icon component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Icon</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>Icon</h1><p>Reusable icon component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Icon eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Icon&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Icon.wrn</code></p><pre data-language="wrn"><code>component Icon &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/identifier-input.wrn b/app/pages/components/identifier-input.wrn
new file mode 100644
index 00000000..039dd3e8
--- /dev/null
+++ b/app/pages/components/identifier-input.wrn
@@ -0,0 +1,37 @@
+page IdentifierInputcomponent {
+  seo {
+    title = "IdentifierInput component"
+    description = "Reusable identifier input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">IdentifierInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>IdentifierInput</h1><p>Reusable identifier input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;IdentifierInput label=&quot;Identifier&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;IdentifierInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Identifier&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/IdentifierInput.wrn</code></p><pre data-language="wrn"><code>component IdentifierInput &#123;
+  props &#123;
+    label = &quot;Identifier&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/illustration.wrn b/app/pages/components/illustration.wrn
new file mode 100644
index 00000000..f3932346
--- /dev/null
+++ b/app/pages/components/illustration.wrn
@@ -0,0 +1,34 @@
+page Illustrationcomponent {
+  seo {
+    title = "Illustration component"
+    description = "Reusable illustration component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Illustration</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>Illustration</h1><p>Reusable illustration component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Illustration eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Illustration&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Illustration.wrn</code></p><pre data-language="wrn"><code>component Illustration &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/image-compression-preview.wrn b/app/pages/components/image-compression-preview.wrn
new file mode 100644
index 00000000..bc2d7329
--- /dev/null
+++ b/app/pages/components/image-compression-preview.wrn
@@ -0,0 +1,34 @@
+page ImageCompressionPreviewcomponent {
+  seo {
+    title = "ImageCompressionPreview component"
+    description = "Reusable image compression preview component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ImageCompressionPreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ImageCompressionPreview</h1><p>Reusable image compression preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ImageCompressionPreview eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ImageCompressionPreview&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ImageCompressionPreview.wrn</code></p><pre data-language="wrn"><code>component ImageCompressionPreview &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/image-editor.wrn b/app/pages/components/image-editor.wrn
new file mode 100644
index 00000000..e7cdc487
--- /dev/null
+++ b/app/pages/components/image-editor.wrn
@@ -0,0 +1,37 @@
+page ImageEditorcomponent {
+  seo {
+    title = "ImageEditor component"
+    description = "Reusable image editor component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ImageEditor</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ImageEditor</h1><p>Reusable image editor component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ImageEditor label=&quot;Image&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ImageEditor&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Image&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ImageEditor.wrn</code></p><pre data-language="wrn"><code>component ImageEditor &#123;
+  props &#123;
+    label = &quot;Image&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/image-preview-dialog.wrn b/app/pages/components/image-preview-dialog.wrn
new file mode 100644
index 00000000..729b241f
--- /dev/null
+++ b/app/pages/components/image-preview-dialog.wrn
@@ -0,0 +1,31 @@
+page ImagePreviewDialogcomponent {
+  seo {
+    title = "ImagePreviewDialog component"
+    description = "Reusable image preview dialog component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ImagePreviewDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>ImagePreviewDialog</h1><p>Reusable image preview dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ImagePreviewDialog title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ImagePreviewDialog&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ImagePreviewDialog.wrn</code></p><pre data-language="wrn"><code>component ImagePreviewDialog &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/image-selector.wrn b/app/pages/components/image-selector.wrn
new file mode 100644
index 00000000..5db9746b
--- /dev/null
+++ b/app/pages/components/image-selector.wrn
@@ -0,0 +1,37 @@
+page ImageSelectorcomponent {
+  seo {
+    title = "ImageSelector component"
+    description = "Reusable image selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ImageSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ImageSelector</h1><p>Reusable image selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ImageSelector label=&quot;Image&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ImageSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Image&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ImageSelector.wrn</code></p><pre data-language="wrn"><code>component ImageSelector &#123;
+  props &#123;
+    label = &quot;Image&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/image-upload.wrn b/app/pages/components/image-upload.wrn
new file mode 100644
index 00000000..c058c1c8
--- /dev/null
+++ b/app/pages/components/image-upload.wrn
@@ -0,0 +1,34 @@
+page ImageUploadcomponent {
+  seo {
+    title = "ImageUpload component"
+    description = "Reusable image upload component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ImageUpload</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ImageUpload</h1><p>Reusable image upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ImageUpload eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ImageUpload&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ImageUpload.wrn</code></p><pre data-language="wrn"><code>component ImageUpload &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/import-progress.wrn b/app/pages/components/import-progress.wrn
new file mode 100644
index 00000000..714ec3a3
--- /dev/null
+++ b/app/pages/components/import-progress.wrn
@@ -0,0 +1,32 @@
+page ImportProgresscomponent {
+  seo {
+    title = "ImportProgress component"
+    description = "Reusable import progress component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ImportProgress</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>ImportProgress</h1><p>Reusable import progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ImportProgress title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ImportProgress&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ImportProgress.wrn</code></p><pre data-language="wrn"><code>component ImportProgress &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/incident-alert.wrn b/app/pages/components/incident-alert.wrn
new file mode 100644
index 00000000..ac72c724
--- /dev/null
+++ b/app/pages/components/incident-alert.wrn
@@ -0,0 +1,32 @@
+page IncidentAlertcomponent {
+  seo {
+    title = "IncidentAlert component"
+    description = "Reusable incident alert component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">IncidentAlert</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>IncidentAlert</h1><p>Reusable incident alert component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;IncidentAlert label=&quot;Incident&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;IncidentAlert&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Incident&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/IncidentAlert.wrn</code></p><pre data-language="wrn"><code>component IncidentAlert &#123;
+  props &#123;
+    label = &quot;Incident&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/incident-banner.wrn b/app/pages/components/incident-banner.wrn
new file mode 100644
index 00000000..01cf9f0b
--- /dev/null
+++ b/app/pages/components/incident-banner.wrn
@@ -0,0 +1,32 @@
+page IncidentBannercomponent {
+  seo {
+    title = "IncidentBanner component"
+    description = "Reusable incident banner component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">IncidentBanner</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>IncidentBanner</h1><p>Reusable incident banner component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;IncidentBanner label=&quot;Incident&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;IncidentBanner&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Incident&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/IncidentBanner.wrn</code></p><pre data-language="wrn"><code>component IncidentBanner &#123;
+  props &#123;
+    label = &quot;Incident&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/incident-card.wrn b/app/pages/components/incident-card.wrn
new file mode 100644
index 00000000..0927426a
--- /dev/null
+++ b/app/pages/components/incident-card.wrn
@@ -0,0 +1,34 @@
+page IncidentCardcomponent {
+  seo {
+    title = "IncidentCard component"
+    description = "Reusable incident card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">IncidentCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>IncidentCard</h1><p>Reusable incident card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;IncidentCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;IncidentCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/IncidentCard.wrn</code></p><pre data-language="wrn"><code>component IncidentCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/incident-list.wrn b/app/pages/components/incident-list.wrn
new file mode 100644
index 00000000..885d69bc
--- /dev/null
+++ b/app/pages/components/incident-list.wrn
@@ -0,0 +1,31 @@
+page IncidentListcomponent {
+  seo {
+    title = "IncidentList component"
+    description = "Reusable incident list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">IncidentList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>IncidentList</h1><p>Reusable incident list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;IncidentList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;IncidentList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/IncidentList.wrn</code></p><pre data-language="wrn"><code>component IncidentList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/incident-response-flow.wrn b/app/pages/components/incident-response-flow.wrn
new file mode 100644
index 00000000..1e6a096b
--- /dev/null
+++ b/app/pages/components/incident-response-flow.wrn
@@ -0,0 +1,32 @@
+page IncidentResponseFlowcomponent {
+  seo {
+    title = "IncidentResponseFlow component"
+    description = "Reusable incident response flow component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">IncidentResponseFlow</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>IncidentResponseFlow</h1><p>Reusable incident response flow component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;IncidentResponseFlow title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;IncidentResponseFlow&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/IncidentResponseFlow.wrn</code></p><pre data-language="wrn"><code>component IncidentResponseFlow &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/incident-severity-badge.wrn b/app/pages/components/incident-severity-badge.wrn
new file mode 100644
index 00000000..b4364b2c
--- /dev/null
+++ b/app/pages/components/incident-severity-badge.wrn
@@ -0,0 +1,32 @@
+page IncidentSeverityBadgecomponent {
+  seo {
+    title = "IncidentSeverityBadge component"
+    description = "Reusable incident severity badge component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">IncidentSeverityBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>IncidentSeverityBadge</h1><p>Reusable incident severity badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;IncidentSeverityBadge label=&quot;IncidentSeverity&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;IncidentSeverityBadge&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;IncidentSeverity&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/IncidentSeverityBadge.wrn</code></p><pre data-language="wrn"><code>component IncidentSeverityBadge &#123;
+  props &#123;
+    label = &quot;IncidentSeverity&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/incident-timeline.wrn b/app/pages/components/incident-timeline.wrn
new file mode 100644
index 00000000..713657be
--- /dev/null
+++ b/app/pages/components/incident-timeline.wrn
@@ -0,0 +1,32 @@
+page IncidentTimelinecomponent {
+  seo {
+    title = "IncidentTimeline component"
+    description = "Reusable incident timeline component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">IncidentTimeline</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>IncidentTimeline</h1><p>Reusable incident timeline component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;IncidentTimeline title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;IncidentTimeline&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/IncidentTimeline.wrn</code></p><pre data-language="wrn"><code>component IncidentTimeline &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/industry-badge.wrn b/app/pages/components/industry-badge.wrn
new file mode 100644
index 00000000..8a0d36ce
--- /dev/null
+++ b/app/pages/components/industry-badge.wrn
@@ -0,0 +1,32 @@
+page IndustryBadgecomponent {
+  seo {
+    title = "IndustryBadge component"
+    description = "Reusable industry badge component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">IndustryBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>IndustryBadge</h1><p>Reusable industry badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;IndustryBadge label=&quot;Industry&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;IndustryBadge&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Industry&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/IndustryBadge.wrn</code></p><pre data-language="wrn"><code>component IndustryBadge &#123;
+  props &#123;
+    label = &quot;Industry&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/industry-selector.wrn b/app/pages/components/industry-selector.wrn
new file mode 100644
index 00000000..95a31c18
--- /dev/null
+++ b/app/pages/components/industry-selector.wrn
@@ -0,0 +1,37 @@
+page IndustrySelectorcomponent {
+  seo {
+    title = "IndustrySelector component"
+    description = "Reusable industry selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">IndustrySelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>IndustrySelector</h1><p>Reusable industry selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;IndustrySelector label=&quot;Industry&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;IndustrySelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Industry&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/IndustrySelector.wrn</code></p><pre data-language="wrn"><code>component IndustrySelector &#123;
+  props &#123;
+    label = &quot;Industry&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/info-card.wrn b/app/pages/components/info-card.wrn
new file mode 100644
index 00000000..4e8822d9
--- /dev/null
+++ b/app/pages/components/info-card.wrn
@@ -0,0 +1,30 @@
+page InfoCardcomponent {
+  seo {
+    title = "InfoCard component"
+    description = "Reusable info card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">InfoCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>InfoCard</h1><p>Reusable info card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;InfoCard title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;InfoCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/InfoCard.wrn</code></p><pre data-language="wrn"><code>component InfoCard &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card wire-catalog-card--info &#123;class&#125;&quot;&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-catalog-card__link&quot;&gt;&lt;span class=&quot;wire-visually-hidden&quot;&gt;Open &#123;title&#125;&lt;/span&gt;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/inline-alert.wrn b/app/pages/components/inline-alert.wrn
new file mode 100644
index 00000000..0fa32dcb
--- /dev/null
+++ b/app/pages/components/inline-alert.wrn
@@ -0,0 +1,32 @@
+page InlineAlertcomponent {
+  seo {
+    title = "InlineAlert component"
+    description = "Reusable inline alert component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">InlineAlert</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>InlineAlert</h1><p>Reusable inline alert component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;InlineAlert label=&quot;Inline&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;InlineAlert&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Inline&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/InlineAlert.wrn</code></p><pre data-language="wrn"><code>component InlineAlert &#123;
+  props &#123;
+    label = &quot;Inline&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/inline-code.wrn b/app/pages/components/inline-code.wrn
new file mode 100644
index 00000000..dcc3fd37
--- /dev/null
+++ b/app/pages/components/inline-code.wrn
@@ -0,0 +1,29 @@
+page InlineCodecomponent {
+  seo {
+    title = "InlineCode component"
+    description = "Reusable inline code component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">InlineCode</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>InlineCode</h1><p>Reusable inline code component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;InlineCode text=&quot;text&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;InlineCode&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>text</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/InlineCode.wrn</code></p><pre data-language="wrn"><code>component InlineCode &#123;
+  props &#123;
+    text = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-type wire-type--small wire-text--&#123;align&#125;  &#123;class&#125;&quot;&gt;&#123;text&#125;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/inline.wrn b/app/pages/components/inline.wrn
new file mode 100644
index 00000000..2c9d22f4
--- /dev/null
+++ b/app/pages/components/inline.wrn
@@ -0,0 +1,30 @@
+page Inlinecomponent {
+  seo {
+    title = "Inline component"
+    description = "Reusable inline component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Inline</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Inline</h1><p>Reusable inline component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>2 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Inline gap=&quot;4&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Inline&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;4&quot;</code></td></tr><tr><td><code>className</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Inline.wrn</code></p><pre data-language="wrn"><code>component Inline &#123;
+  props &#123;
+    gap = &quot;4&quot;
+    className = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;flex flex-wrap items-center gap-&#123;gap&#125; &#123;className&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/input-group.wrn b/app/pages/components/input-group.wrn
new file mode 100644
index 00000000..6c44ca04
--- /dev/null
+++ b/app/pages/components/input-group.wrn
@@ -0,0 +1,37 @@
+page InputGroupcomponent {
+  seo {
+    title = "InputGroup component"
+    description = "Reusable input group component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">InputGroup</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>InputGroup</h1><p>Reusable input group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;InputGroup label=&quot;Input&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;InputGroup&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Input&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/InputGroup.wrn</code></p><pre data-language="wrn"><code>component InputGroup &#123;
+  props &#123;
+    label = &quot;Input&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/input.wrn b/app/pages/components/input.wrn
new file mode 100644
index 00000000..ba08daee
--- /dev/null
+++ b/app/pages/components/input.wrn
@@ -0,0 +1,34 @@
+page inputcomponent {
+  seo {
+    title = "input component"
+    description = "Reusable input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">input</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>input</h1><p>Reusable input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;input type=&quot;text&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;input&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/input.wrn</code></p><pre data-language="wrn"><code>// Text input. Pairs with the validation system (name maps to a field).
+component Input &#123;
+  props &#123;
+    type = &quot;text&quot;
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;input type=&quot;&#123;type&#125;&quot; name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; class=&quot;wire-input &#123;class&#125;&quot;&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/inset-panel.wrn b/app/pages/components/inset-panel.wrn
new file mode 100644
index 00000000..457a1fb8
--- /dev/null
+++ b/app/pages/components/inset-panel.wrn
@@ -0,0 +1,27 @@
+page InsetPanelcomponent {
+  seo {
+    title = "InsetPanel component"
+    description = "Reusable inset panel component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">InsetPanel</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>InsetPanel</h1><p>Reusable inset panel component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;InsetPanel /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;InsetPanel&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/InsetPanel.wrn</code></p><pre data-language="wrn"><code>component InsetPanel &#123;
+  props &#123;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-inset-panel &#123;class&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/integer-input.wrn b/app/pages/components/integer-input.wrn
new file mode 100644
index 00000000..f3c67969
--- /dev/null
+++ b/app/pages/components/integer-input.wrn
@@ -0,0 +1,37 @@
+page IntegerInputcomponent {
+  seo {
+    title = "IntegerInput component"
+    description = "Reusable integer input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">IntegerInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>IntegerInput</h1><p>Reusable integer input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;IntegerInput label=&quot;Integer&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;IntegerInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Integer&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/IntegerInput.wrn</code></p><pre data-language="wrn"><code>component IntegerInput &#123;
+  props &#123;
+    label = &quot;Integer&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/integration-card.wrn b/app/pages/components/integration-card.wrn
new file mode 100644
index 00000000..a2d3917d
--- /dev/null
+++ b/app/pages/components/integration-card.wrn
@@ -0,0 +1,30 @@
+page IntegrationCardcomponent {
+  seo {
+    title = "IntegrationCard component"
+    description = "Reusable integration card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">IntegrationCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>IntegrationCard</h1><p>Reusable integration card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;IntegrationCard title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;IntegrationCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/IntegrationCard.wrn</code></p><pre data-language="wrn"><code>component IntegrationCard &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card wire-catalog-card--integration &#123;class&#125;&quot;&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-catalog-card__link&quot;&gt;&lt;span class=&quot;wire-visually-hidden&quot;&gt;Open &#123;title&#125;&lt;/span&gt;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/invoice-line-item.wrn b/app/pages/components/invoice-line-item.wrn
new file mode 100644
index 00000000..995ee721
--- /dev/null
+++ b/app/pages/components/invoice-line-item.wrn
@@ -0,0 +1,34 @@
+page InvoiceLineItemcomponent {
+  seo {
+    title = "InvoiceLineItem component"
+    description = "Reusable invoice line item component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">InvoiceLineItem</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>InvoiceLineItem</h1><p>Reusable invoice line item component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;InvoiceLineItem eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;InvoiceLineItem&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/InvoiceLineItem.wrn</code></p><pre data-language="wrn"><code>component InvoiceLineItem &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/invoice-summary.wrn b/app/pages/components/invoice-summary.wrn
new file mode 100644
index 00000000..4cdf8314
--- /dev/null
+++ b/app/pages/components/invoice-summary.wrn
@@ -0,0 +1,34 @@
+page InvoiceSummarycomponent {
+  seo {
+    title = "InvoiceSummary component"
+    description = "Reusable invoice summary component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">InvoiceSummary</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>InvoiceSummary</h1><p>Reusable invoice summary component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;InvoiceSummary eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;InvoiceSummary&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/InvoiceSummary.wrn</code></p><pre data-language="wrn"><code>component InvoiceSummary &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/ip-address-input.wrn b/app/pages/components/ip-address-input.wrn
new file mode 100644
index 00000000..389b8158
--- /dev/null
+++ b/app/pages/components/ip-address-input.wrn
@@ -0,0 +1,37 @@
+page IpAddressInputcomponent {
+  seo {
+    title = "IpAddressInput component"
+    description = "Reusable ip address input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">IpAddressInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>IpAddressInput</h1><p>Reusable ip address input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;IpAddressInput label=&quot;IpAddress&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;IpAddressInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;IpAddress&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/IpAddressInput.wrn</code></p><pre data-language="wrn"><code>component IpAddressInput &#123;
+  props &#123;
+    label = &quot;IpAddress&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/job-card.wrn b/app/pages/components/job-card.wrn
new file mode 100644
index 00000000..61042934
--- /dev/null
+++ b/app/pages/components/job-card.wrn
@@ -0,0 +1,34 @@
+page JobCardcomponent {
+  seo {
+    title = "JobCard component"
+    description = "Reusable job card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">JobCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>JobCard</h1><p>Reusable job card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;JobCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;JobCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/JobCard.wrn</code></p><pre data-language="wrn"><code>component JobCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/job-progress.wrn b/app/pages/components/job-progress.wrn
new file mode 100644
index 00000000..c5517689
--- /dev/null
+++ b/app/pages/components/job-progress.wrn
@@ -0,0 +1,32 @@
+page JobProgresscomponent {
+  seo {
+    title = "JobProgress component"
+    description = "Reusable job progress component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">JobProgress</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>JobProgress</h1><p>Reusable job progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;JobProgress title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;JobProgress&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/JobProgress.wrn</code></p><pre data-language="wrn"><code>component JobProgress &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/job-title-input.wrn b/app/pages/components/job-title-input.wrn
new file mode 100644
index 00000000..bb8143b6
--- /dev/null
+++ b/app/pages/components/job-title-input.wrn
@@ -0,0 +1,37 @@
+page JobTitleInputcomponent {
+  seo {
+    title = "JobTitleInput component"
+    description = "Reusable job title input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">JobTitleInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>JobTitleInput</h1><p>Reusable job title input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;JobTitleInput label=&quot;JobTitle&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;JobTitleInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;JobTitle&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/JobTitleInput.wrn</code></p><pre data-language="wrn"><code>component JobTitleInput &#123;
+  props &#123;
+    label = &quot;JobTitle&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/json-input.wrn b/app/pages/components/json-input.wrn
new file mode 100644
index 00000000..c8ed3298
--- /dev/null
+++ b/app/pages/components/json-input.wrn
@@ -0,0 +1,37 @@
+page JsonInputcomponent {
+  seo {
+    title = "JsonInput component"
+    description = "Reusable json input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">JsonInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>JsonInput</h1><p>Reusable json input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;JsonInput label=&quot;Json&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;JsonInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Json&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/JsonInput.wrn</code></p><pre data-language="wrn"><code>component JsonInput &#123;
+  props &#123;
+    label = &quot;Json&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/json-viewer.wrn b/app/pages/components/json-viewer.wrn
new file mode 100644
index 00000000..fad831c8
--- /dev/null
+++ b/app/pages/components/json-viewer.wrn
@@ -0,0 +1,34 @@
+page JsonViewercomponent {
+  seo {
+    title = "JsonViewer component"
+    description = "Reusable json viewer component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">JsonViewer</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>JsonViewer</h1><p>Reusable json viewer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;JsonViewer eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;JsonViewer&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/JsonViewer.wrn</code></p><pre data-language="wrn"><code>component JsonViewer &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/key-value-table.wrn b/app/pages/components/key-value-table.wrn
new file mode 100644
index 00000000..4c03ea52
--- /dev/null
+++ b/app/pages/components/key-value-table.wrn
@@ -0,0 +1,31 @@
+page KeyValueTablecomponent {
+  seo {
+    title = "KeyValueTable component"
+    description = "Reusable key value table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">KeyValueTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>KeyValueTable</h1><p>Reusable key value table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;KeyValueTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;KeyValueTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/KeyValueTable.wrn</code></p><pre data-language="wrn"><code>component KeyValueTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/kyc-document-upload.wrn b/app/pages/components/kyc-document-upload.wrn
new file mode 100644
index 00000000..aedd8602
--- /dev/null
+++ b/app/pages/components/kyc-document-upload.wrn
@@ -0,0 +1,34 @@
+page KycDocumentUploadcomponent {
+  seo {
+    title = "KycDocumentUpload component"
+    description = "Reusable kyc document upload component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">KycDocumentUpload</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>KycDocumentUpload</h1><p>Reusable kyc document upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;KycDocumentUpload eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;KycDocumentUpload&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/KycDocumentUpload.wrn</code></p><pre data-language="wrn"><code>component KycDocumentUpload &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/language-selector.wrn b/app/pages/components/language-selector.wrn
new file mode 100644
index 00000000..512b27cc
--- /dev/null
+++ b/app/pages/components/language-selector.wrn
@@ -0,0 +1,37 @@
+page LanguageSelectorcomponent {
+  seo {
+    title = "LanguageSelector component"
+    description = "Reusable language selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LanguageSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>LanguageSelector</h1><p>Reusable language selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LanguageSelector label=&quot;Language&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LanguageSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Language&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LanguageSelector.wrn</code></p><pre data-language="wrn"><code>component LanguageSelector &#123;
+  props &#123;
+    label = &quot;Language&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/language-switcher.wrn b/app/pages/components/language-switcher.wrn
new file mode 100644
index 00000000..88aaba28
--- /dev/null
+++ b/app/pages/components/language-switcher.wrn
@@ -0,0 +1,34 @@
+page LanguageSwitchercomponent {
+  seo {
+    title = "LanguageSwitcher component"
+    description = "Reusable language switcher component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LanguageSwitcher</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>LanguageSwitcher</h1><p>Reusable language switcher component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LanguageSwitcher eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LanguageSwitcher&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LanguageSwitcher.wrn</code></p><pre data-language="wrn"><code>component LanguageSwitcher &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/last-name-input.wrn b/app/pages/components/last-name-input.wrn
new file mode 100644
index 00000000..eebd93ce
--- /dev/null
+++ b/app/pages/components/last-name-input.wrn
@@ -0,0 +1,37 @@
+page LastNameInputcomponent {
+  seo {
+    title = "LastNameInput component"
+    description = "Reusable last name input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LastNameInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>LastNameInput</h1><p>Reusable last name input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LastNameInput label=&quot;LastName&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LastNameInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;LastName&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LastNameInput.wrn</code></p><pre data-language="wrn"><code>component LastNameInput &#123;
+  props &#123;
+    label = &quot;LastName&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/latency-metric.wrn b/app/pages/components/latency-metric.wrn
new file mode 100644
index 00000000..9c523f02
--- /dev/null
+++ b/app/pages/components/latency-metric.wrn
@@ -0,0 +1,32 @@
+page LatencyMetriccomponent {
+  seo {
+    title = "LatencyMetric component"
+    description = "Reusable latency metric component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LatencyMetric</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>LatencyMetric</h1><p>Reusable latency metric component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LatencyMetric title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LatencyMetric&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LatencyMetric.wrn</code></p><pre data-language="wrn"><code>component LatencyMetric &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/latitude-input.wrn b/app/pages/components/latitude-input.wrn
new file mode 100644
index 00000000..24cc977d
--- /dev/null
+++ b/app/pages/components/latitude-input.wrn
@@ -0,0 +1,37 @@
+page LatitudeInputcomponent {
+  seo {
+    title = "LatitudeInput component"
+    description = "Reusable latitude input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LatitudeInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>LatitudeInput</h1><p>Reusable latitude input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LatitudeInput label=&quot;Latitude&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LatitudeInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Latitude&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LatitudeInput.wrn</code></p><pre data-language="wrn"><code>component LatitudeInput &#123;
+  props &#123;
+    label = &quot;Latitude&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/lead-text.wrn b/app/pages/components/lead-text.wrn
new file mode 100644
index 00000000..9eb02fe5
--- /dev/null
+++ b/app/pages/components/lead-text.wrn
@@ -0,0 +1,29 @@
+page LeadTextcomponent {
+  seo {
+    title = "LeadText component"
+    description = "Reusable lead text component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LeadText</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>LeadText</h1><p>Reusable lead text component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LeadText text=&quot;text&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LeadText&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>text</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LeadText.wrn</code></p><pre data-language="wrn"><code>component LeadText &#123;
+  props &#123;
+    text = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-type wire-type--lead wire-text--&#123;align&#125;  &#123;class&#125;&quot;&gt;&#123;text&#125;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/leadership-grid.wrn b/app/pages/components/leadership-grid.wrn
new file mode 100644
index 00000000..dc7db0cc
--- /dev/null
+++ b/app/pages/components/leadership-grid.wrn
@@ -0,0 +1,31 @@
+page LeadershipGridcomponent {
+  seo {
+    title = "LeadershipGrid component"
+    description = "Reusable leadership grid component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LeadershipGrid</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>LeadershipGrid</h1><p>Reusable leadership grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LeadershipGrid title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LeadershipGrid&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LeadershipGrid.wrn</code></p><pre data-language="wrn"><code>component LeadershipGrid &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/legal-acceptance-notice.wrn b/app/pages/components/legal-acceptance-notice.wrn
new file mode 100644
index 00000000..d615e686
--- /dev/null
+++ b/app/pages/components/legal-acceptance-notice.wrn
@@ -0,0 +1,32 @@
+page LegalAcceptanceNoticecomponent {
+  seo {
+    title = "LegalAcceptanceNotice component"
+    description = "Reusable legal acceptance notice component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LegalAcceptanceNotice</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>LegalAcceptanceNotice</h1><p>Reusable legal acceptance notice component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LegalAcceptanceNotice label=&quot;LegalAcceptance&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LegalAcceptanceNotice&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;LegalAcceptance&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LegalAcceptanceNotice.wrn</code></p><pre data-language="wrn"><code>component LegalAcceptanceNotice &#123;
+  props &#123;
+    label = &quot;LegalAcceptance&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/legal-bullet-list.wrn b/app/pages/components/legal-bullet-list.wrn
new file mode 100644
index 00000000..342cae33
--- /dev/null
+++ b/app/pages/components/legal-bullet-list.wrn
@@ -0,0 +1,31 @@
+page LegalBulletListcomponent {
+  seo {
+    title = "LegalBulletList component"
+    description = "Reusable legal bullet list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LegalBulletList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>LegalBulletList</h1><p>Reusable legal bullet list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LegalBulletList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LegalBulletList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LegalBulletList.wrn</code></p><pre data-language="wrn"><code>component LegalBulletList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/legal-contact-block.wrn b/app/pages/components/legal-contact-block.wrn
new file mode 100644
index 00000000..f3a66485
--- /dev/null
+++ b/app/pages/components/legal-contact-block.wrn
@@ -0,0 +1,34 @@
+page LegalContactBlockcomponent {
+  seo {
+    title = "LegalContactBlock component"
+    description = "Reusable legal contact block component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LegalContactBlock</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>LegalContactBlock</h1><p>Reusable legal contact block component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LegalContactBlock eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LegalContactBlock&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LegalContactBlock.wrn</code></p><pre data-language="wrn"><code>component LegalContactBlock &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/legal-definition-list.wrn b/app/pages/components/legal-definition-list.wrn
new file mode 100644
index 00000000..7d0cd5bc
--- /dev/null
+++ b/app/pages/components/legal-definition-list.wrn
@@ -0,0 +1,31 @@
+page LegalDefinitionListcomponent {
+  seo {
+    title = "LegalDefinitionList component"
+    description = "Reusable legal definition list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LegalDefinitionList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>LegalDefinitionList</h1><p>Reusable legal definition list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LegalDefinitionList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LegalDefinitionList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LegalDefinitionList.wrn</code></p><pre data-language="wrn"><code>component LegalDefinitionList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/legal-document-header.wrn b/app/pages/components/legal-document-header.wrn
new file mode 100644
index 00000000..baba429d
--- /dev/null
+++ b/app/pages/components/legal-document-header.wrn
@@ -0,0 +1,31 @@
+page LegalDocumentHeadercomponent {
+  seo {
+    title = "LegalDocumentHeader component"
+    description = "Reusable legal document header component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LegalDocumentHeader</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>LegalDocumentHeader</h1><p>Reusable legal document header component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LegalDocumentHeader eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LegalDocumentHeader&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LegalDocumentHeader.wrn</code></p><pre data-language="wrn"><code>component LegalDocumentHeader &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/legal-document-layout.wrn b/app/pages/components/legal-document-layout.wrn
new file mode 100644
index 00000000..9f4a34b0
--- /dev/null
+++ b/app/pages/components/legal-document-layout.wrn
@@ -0,0 +1,32 @@
+page LegalDocumentLayoutcomponent {
+  seo {
+    title = "LegalDocumentLayout component"
+    description = "Reusable legal document layout component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LegalDocumentLayout</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>LegalDocumentLayout</h1><p>Reusable legal document layout component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>2 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LegalDocumentLayout title=&quot;Legal document&quot; effectiveDate=&quot;effectiveDate&quot; updatedDate=&quot;updatedDate&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LegalDocumentLayout&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Legal document&quot;</code></td></tr><tr><td><code>effectiveDate</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>updatedDate</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>toc</code></li><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LegalDocumentLayout.wrn</code></p><pre data-language="wrn"><code>component LegalDocumentLayout &#123;
+  props &#123;
+    class = &quot;&quot;
+    title = &quot;Legal document&quot;
+    effectiveDate = &quot;&quot;
+    updatedDate = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;article class=&quot;grid max-w-7xl gap-10 lg:grid-cols-[16rem_minmax(0,1fr)] &#123;class&#125;&quot;&gt;&lt;aside class=&quot;lg:sticky lg:top-24 lg:self-start&quot;&gt;&lt;div class=&quot;text-sm font-semibold&quot;&gt;On this page&lt;/div&gt;&lt;nav class=&quot;mt-4 text-sm text-slate-500&quot;&gt;&lt;slot name=&quot;toc&quot; /&gt;&lt;/nav&gt;&lt;/aside&gt;&lt;main class=&quot;min-w-0 max-w-3xl&quot;&gt;&lt;header class=&quot;border-b border-slate-200 pb-8 dark:border-slate-800&quot;&gt;&lt;h1 class=&quot;text-4xl font-black tracking-tight&quot;&gt;&#123;title&#125;&lt;/h1&gt;&lt;div class=&quot;mt-4 flex flex-wrap gap-4 text-sm text-slate-500&quot;&gt;&lt;span data-show=&quot;effectiveDate&quot;&gt;Effective: &#123;effectiveDate&#125;&lt;/span&gt;&lt;span data-show=&quot;updatedDate&quot;&gt;Updated: &#123;updatedDate&#125;&lt;/span&gt;&lt;/div&gt;&lt;/header&gt;&lt;div class=&quot;prose prose-slate mt-8 max-w-none dark:prose-invert&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;/main&gt;&lt;/article&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/legal-hero.wrn b/app/pages/components/legal-hero.wrn
new file mode 100644
index 00000000..a671b2dc
--- /dev/null
+++ b/app/pages/components/legal-hero.wrn
@@ -0,0 +1,31 @@
+page LegalHerocomponent {
+  seo {
+    title = "LegalHero component"
+    description = "Reusable legal hero component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LegalHero</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>LegalHero</h1><p>Reusable legal hero component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LegalHero eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LegalHero&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LegalHero.wrn</code></p><pre data-language="wrn"><code>component LegalHero &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/legal-language-selector.wrn b/app/pages/components/legal-language-selector.wrn
new file mode 100644
index 00000000..55ce00ab
--- /dev/null
+++ b/app/pages/components/legal-language-selector.wrn
@@ -0,0 +1,37 @@
+page LegalLanguageSelectorcomponent {
+  seo {
+    title = "LegalLanguageSelector component"
+    description = "Reusable legal language selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LegalLanguageSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>LegalLanguageSelector</h1><p>Reusable legal language selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LegalLanguageSelector label=&quot;LegalLanguage&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LegalLanguageSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;LegalLanguage&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LegalLanguageSelector.wrn</code></p><pre data-language="wrn"><code>component LegalLanguageSelector &#123;
+  props &#123;
+    label = &quot;LegalLanguage&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/legal-notice.wrn b/app/pages/components/legal-notice.wrn
new file mode 100644
index 00000000..08e46d07
--- /dev/null
+++ b/app/pages/components/legal-notice.wrn
@@ -0,0 +1,32 @@
+page LegalNoticecomponent {
+  seo {
+    title = "LegalNotice component"
+    description = "Reusable legal notice component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LegalNotice</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>LegalNotice</h1><p>Reusable legal notice component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LegalNotice label=&quot;Legal&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LegalNotice&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Legal&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LegalNotice.wrn</code></p><pre data-language="wrn"><code>component LegalNotice &#123;
+  props &#123;
+    label = &quot;Legal&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/legal-page-shell.wrn b/app/pages/components/legal-page-shell.wrn
new file mode 100644
index 00000000..1c65edd6
--- /dev/null
+++ b/app/pages/components/legal-page-shell.wrn
@@ -0,0 +1,27 @@
+page LegalPageShellcomponent {
+  seo {
+    title = "LegalPageShell component"
+    description = "Reusable legal page shell component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LegalPageShell</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>LegalPageShell</h1><p>Reusable legal page shell component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>2 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LegalPageShell /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LegalPageShell&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>navigation</code></li><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LegalPageShell.wrn</code></p><pre data-language="wrn"><code>component LegalPageShell &#123;
+  props &#123;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-page-shell wire-page-shell--legal &#123;class&#125;&quot;&gt;&lt;aside class=&quot;wire-page-shell__aside&quot;&gt;&lt;slot name=&quot;navigation&quot; /&gt;&lt;/aside&gt;&lt;main class=&quot;wire-page-shell__main&quot;&gt;&lt;slot /&gt;&lt;/main&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/legal-print-button.wrn b/app/pages/components/legal-print-button.wrn
new file mode 100644
index 00000000..a129f29e
--- /dev/null
+++ b/app/pages/components/legal-print-button.wrn
@@ -0,0 +1,32 @@
+page LegalPrintButtoncomponent {
+  seo {
+    title = "LegalPrintButton component"
+    description = "Reusable legal print button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LegalPrintButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>LegalPrintButton</h1><p>Reusable legal print button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LegalPrintButton label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LegalPrintButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LegalPrintButton.wrn</code></p><pre data-language="wrn"><code>component LegalPrintButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/legal-region-selector.wrn b/app/pages/components/legal-region-selector.wrn
new file mode 100644
index 00000000..80b9002e
--- /dev/null
+++ b/app/pages/components/legal-region-selector.wrn
@@ -0,0 +1,37 @@
+page LegalRegionSelectorcomponent {
+  seo {
+    title = "LegalRegionSelector component"
+    description = "Reusable legal region selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LegalRegionSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>LegalRegionSelector</h1><p>Reusable legal region selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LegalRegionSelector label=&quot;LegalRegion&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LegalRegionSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;LegalRegion&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LegalRegionSelector.wrn</code></p><pre data-language="wrn"><code>component LegalRegionSelector &#123;
+  props &#123;
+    label = &quot;LegalRegion&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/legal-section.wrn b/app/pages/components/legal-section.wrn
new file mode 100644
index 00000000..d5bfe9dc
--- /dev/null
+++ b/app/pages/components/legal-section.wrn
@@ -0,0 +1,31 @@
+page LegalSectioncomponent {
+  seo {
+    title = "LegalSection component"
+    description = "Reusable legal section component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LegalSection</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>LegalSection</h1><p>Reusable legal section component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LegalSection eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LegalSection&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LegalSection.wrn</code></p><pre data-language="wrn"><code>component LegalSection &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/legal-summary.wrn b/app/pages/components/legal-summary.wrn
new file mode 100644
index 00000000..d856d1a2
--- /dev/null
+++ b/app/pages/components/legal-summary.wrn
@@ -0,0 +1,34 @@
+page LegalSummarycomponent {
+  seo {
+    title = "LegalSummary component"
+    description = "Reusable legal summary component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LegalSummary</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>LegalSummary</h1><p>Reusable legal summary component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LegalSummary eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LegalSummary&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LegalSummary.wrn</code></p><pre data-language="wrn"><code>component LegalSummary &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/legal-table-of-contents.wrn b/app/pages/components/legal-table-of-contents.wrn
new file mode 100644
index 00000000..e4307779
--- /dev/null
+++ b/app/pages/components/legal-table-of-contents.wrn
@@ -0,0 +1,29 @@
+page LegalTableOfContentscomponent {
+  seo {
+    title = "LegalTableOfContents component"
+    description = "Reusable legal table of contents component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LegalTableOfContents</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>LegalTableOfContents</h1><p>Reusable legal table of contents component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LegalTableOfContents title=&quot;On this page&quot; items=&quot;[]&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LegalTableOfContents&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;On this page&quot;</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LegalTableOfContents.wrn</code></p><pre data-language="wrn"><code>component LegalTableOfContents &#123;
+  props &#123;
+    title = &quot;On this page&quot;
+    items = []
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;nav aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-legal-toc &#123;class&#125;&quot;&gt;&lt;h2&gt;&#123;title&#125;&lt;/h2&gt;&lt;ol&gt;&#123;#each items as item&#125;&lt;li&gt;&lt;a href=&quot;&#123;item.href&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;&lt;/li&gt;&#123;/each&#125;&lt;/ol&gt;&lt;/nav&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/legal-table.wrn b/app/pages/components/legal-table.wrn
new file mode 100644
index 00000000..3d03b44b
--- /dev/null
+++ b/app/pages/components/legal-table.wrn
@@ -0,0 +1,31 @@
+page LegalTablecomponent {
+  seo {
+    title = "LegalTable component"
+    description = "Reusable legal table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LegalTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>LegalTable</h1><p>Reusable legal table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LegalTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LegalTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LegalTable.wrn</code></p><pre data-language="wrn"><code>component LegalTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/legal-version-badge.wrn b/app/pages/components/legal-version-badge.wrn
new file mode 100644
index 00000000..bf8d2ff6
--- /dev/null
+++ b/app/pages/components/legal-version-badge.wrn
@@ -0,0 +1,32 @@
+page LegalVersionBadgecomponent {
+  seo {
+    title = "LegalVersionBadge component"
+    description = "Reusable legal version badge component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LegalVersionBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>LegalVersionBadge</h1><p>Reusable legal version badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LegalVersionBadge label=&quot;LegalVersion&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LegalVersionBadge&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;LegalVersion&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LegalVersionBadge.wrn</code></p><pre data-language="wrn"><code>component LegalVersionBadge &#123;
+  props &#123;
+    label = &quot;LegalVersion&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/letter-spacing-picker.wrn b/app/pages/components/letter-spacing-picker.wrn
new file mode 100644
index 00000000..4edb485a
--- /dev/null
+++ b/app/pages/components/letter-spacing-picker.wrn
@@ -0,0 +1,37 @@
+page LetterSpacingPickercomponent {
+  seo {
+    title = "LetterSpacingPicker component"
+    description = "Reusable letter spacing picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LetterSpacingPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>LetterSpacingPicker</h1><p>Reusable letter spacing picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LetterSpacingPicker label=&quot;LetterSpacing&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LetterSpacingPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;LetterSpacing&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LetterSpacingPicker.wrn</code></p><pre data-language="wrn"><code>component LetterSpacingPicker &#123;
+  props &#123;
+    label = &quot;LetterSpacing&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/license-key-input.wrn b/app/pages/components/license-key-input.wrn
new file mode 100644
index 00000000..174093e0
--- /dev/null
+++ b/app/pages/components/license-key-input.wrn
@@ -0,0 +1,37 @@
+page LicenseKeyInputcomponent {
+  seo {
+    title = "LicenseKeyInput component"
+    description = "Reusable license key input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LicenseKeyInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>LicenseKeyInput</h1><p>Reusable license key input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LicenseKeyInput label=&quot;LicenseKey&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LicenseKeyInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;LicenseKey&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LicenseKeyInput.wrn</code></p><pre data-language="wrn"><code>component LicenseKeyInput &#123;
+  props &#123;
+    label = &quot;LicenseKey&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/lightbox.wrn b/app/pages/components/lightbox.wrn
new file mode 100644
index 00000000..460614f7
--- /dev/null
+++ b/app/pages/components/lightbox.wrn
@@ -0,0 +1,31 @@
+page Lightboxcomponent {
+  seo {
+    title = "Lightbox component"
+    description = "Reusable lightbox component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Lightbox</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Lightbox</h1><p>Reusable lightbox component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Lightbox title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Lightbox&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Lightbox.wrn</code></p><pre data-language="wrn"><code>component Lightbox &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/line-chart.wrn b/app/pages/components/line-chart.wrn
new file mode 100644
index 00000000..27a7578e
--- /dev/null
+++ b/app/pages/components/line-chart.wrn
@@ -0,0 +1,32 @@
+page LineChartcomponent {
+  seo {
+    title = "LineChart component"
+    description = "Reusable line chart component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LineChart</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>LineChart</h1><p>Reusable line chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LineChart title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LineChart&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LineChart.wrn</code></p><pre data-language="wrn"><code>component LineChart &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/line-height-picker.wrn b/app/pages/components/line-height-picker.wrn
new file mode 100644
index 00000000..003d76bd
--- /dev/null
+++ b/app/pages/components/line-height-picker.wrn
@@ -0,0 +1,37 @@
+page LineHeightPickercomponent {
+  seo {
+    title = "LineHeightPicker component"
+    description = "Reusable line height picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LineHeightPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>LineHeightPicker</h1><p>Reusable line height picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LineHeightPicker label=&quot;LineHeight&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LineHeightPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;LineHeight&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LineHeightPicker.wrn</code></p><pre data-language="wrn"><code>component LineHeightPicker &#123;
+  props &#123;
+    label = &quot;LineHeight&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/link-button.wrn b/app/pages/components/link-button.wrn
new file mode 100644
index 00000000..909a764a
--- /dev/null
+++ b/app/pages/components/link-button.wrn
@@ -0,0 +1,30 @@
+page LinkButtoncomponent {
+  seo {
+    title = "LinkButton component"
+    description = "Reusable link button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LinkButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>LinkButton</h1><p>Reusable link button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LinkButton label=&quot;Action&quot; type=&quot;button&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LinkButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LinkButton.wrn</code></p><pre data-language="wrn"><code>component LinkButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    type = &quot;button&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;button type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--ghost &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/link.wrn b/app/pages/components/link.wrn
new file mode 100644
index 00000000..1bb29f75
--- /dev/null
+++ b/app/pages/components/link.wrn
@@ -0,0 +1,32 @@
+page Linkcomponent {
+  seo {
+    title = "Link component"
+    description = "Reusable link component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Link</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Link</h1><p>Reusable link component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Link href=&quot;#&quot; label=&quot;Link&quot; external=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Link&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;#&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Link&quot;</code></td></tr><tr><td><code>external</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>className</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Link.wrn</code></p><pre data-language="wrn"><code>component Link &#123;
+  props &#123;
+    href = &quot;#&quot;
+    label = &quot;Link&quot;
+    external = false
+    className = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;a href=&quot;&#123;href&#125;&quot; target=&quot;&#123;external ? '_blank' : ''&#125;&quot; rel=&quot;&#123;external ? 'noreferrer' : ''&#125;&quot; class=&quot;font-medium text-violet-600 underline-offset-4 transition hover:text-violet-700 hover:underline focus-visible:rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 &#123;className&#125;&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;external&quot; aria-hidden=&quot;true&quot;&gt; ↗&lt;/span&gt;&lt;/a&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/list.wrn b/app/pages/components/list.wrn
new file mode 100644
index 00000000..279f7e08
--- /dev/null
+++ b/app/pages/components/list.wrn
@@ -0,0 +1,31 @@
+page Listcomponent {
+  seo {
+    title = "List component"
+    description = "Reusable list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">List</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>List</h1><p>Reusable list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;List title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;List&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/List.wrn</code></p><pre data-language="wrn"><code>component List &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/loading-button.wrn b/app/pages/components/loading-button.wrn
new file mode 100644
index 00000000..46b56b26
--- /dev/null
+++ b/app/pages/components/loading-button.wrn
@@ -0,0 +1,35 @@
+page LoadingButtoncomponent {
+  seo {
+    title = "LoadingButton component"
+    description = "Reusable loading button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LoadingButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>LoadingButton</h1><p>Reusable loading button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>7 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LoadingButton label=&quot;Continue&quot; loadingLabel=&quot;Loading…&quot; loading=&quot;false&quot; disabled=&quot;false&quot; type=&quot;button&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LoadingButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Continue&quot;</code></td></tr><tr><td><code>loadingLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Loading…&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LoadingButton.wrn</code></p><pre data-language="wrn"><code>component LoadingButton &#123;
+  props &#123;
+    label = &quot;Continue&quot;
+    loadingLabel = &quot;Loading…&quot;
+    loading = false
+    disabled = false
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;button type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled || loading&#125;&quot; aria-disabled=&quot;&#123;disabled || loading&#125;&quot; aria-busy=&quot;&#123;loading&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125; wire-loading-button &#123;class&#125;&quot;&gt;&lt;span data-show=&quot;loading&quot; class=&quot;wire-spinner wire-spinner--inline&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;&lt;span&gt;&#123;loading ? loadingLabel : label&#125;&lt;/span&gt;&lt;/button&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/locale-selector.wrn b/app/pages/components/locale-selector.wrn
new file mode 100644
index 00000000..619236e3
--- /dev/null
+++ b/app/pages/components/locale-selector.wrn
@@ -0,0 +1,37 @@
+page LocaleSelectorcomponent {
+  seo {
+    title = "LocaleSelector component"
+    description = "Reusable locale selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LocaleSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>LocaleSelector</h1><p>Reusable locale selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LocaleSelector label=&quot;Locale&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LocaleSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Locale&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LocaleSelector.wrn</code></p><pre data-language="wrn"><code>component LocaleSelector &#123;
+  props &#123;
+    label = &quot;Locale&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/localized-route-link.wrn b/app/pages/components/localized-route-link.wrn
new file mode 100644
index 00000000..1d6a1fa9
--- /dev/null
+++ b/app/pages/components/localized-route-link.wrn
@@ -0,0 +1,32 @@
+page LocalizedRouteLinkcomponent {
+  seo {
+    title = "LocalizedRouteLink component"
+    description = "Reusable localized route link component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LocalizedRouteLink</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>LocalizedRouteLink</h1><p>Reusable localized route link component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LocalizedRouteLink label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LocalizedRouteLink&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LocalizedRouteLink.wrn</code></p><pre data-language="wrn"><code>component LocalizedRouteLink &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/location-picker.wrn b/app/pages/components/location-picker.wrn
new file mode 100644
index 00000000..e1a2f78e
--- /dev/null
+++ b/app/pages/components/location-picker.wrn
@@ -0,0 +1,37 @@
+page LocationPickercomponent {
+  seo {
+    title = "LocationPicker component"
+    description = "Reusable location picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LocationPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>LocationPicker</h1><p>Reusable location picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LocationPicker label=&quot;Location&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LocationPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Location&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LocationPicker.wrn</code></p><pre data-language="wrn"><code>component LocationPicker &#123;
+  props &#123;
+    label = &quot;Location&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/log-table.wrn b/app/pages/components/log-table.wrn
new file mode 100644
index 00000000..c38428d9
--- /dev/null
+++ b/app/pages/components/log-table.wrn
@@ -0,0 +1,31 @@
+page LogTablecomponent {
+  seo {
+    title = "LogTable component"
+    description = "Reusable log table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LogTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>LogTable</h1><p>Reusable log table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LogTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LogTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LogTable.wrn</code></p><pre data-language="wrn"><code>component LogTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/logo-cloud.wrn b/app/pages/components/logo-cloud.wrn
new file mode 100644
index 00000000..ecdd5925
--- /dev/null
+++ b/app/pages/components/logo-cloud.wrn
@@ -0,0 +1,171 @@
+page LogoCloudcomponent {
+  seo {
+    title = "LogoCloud component"
+    description = "Reusable logo cloud component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LogoCloud</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>LogoCloud</h1><p>Reusable logo cloud component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LogoCloud eyebrow=&quot;eyebrow&quot; title=&quot;Trusted by teams building modern products&quot; description=&quot;description&quot; logos=&quot;[]&quot; centered=&quot;true&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LogoCloud&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Trusted by teams building modern products&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>logos</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>centered</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>compact</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;strip&quot;</code></td></tr><tr><td><code>grayscale</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>showNames</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>maxItems</code></td><td><code>number</code></td><td>Optional</td><td><code>8</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LogoCloud.wrn</code></p><pre data-language="wrn"><code>component LogoCloud &#123;
+    props &#123;
+        class: string = &quot;&quot;
+        eyebrow = &quot;&quot;
+        title = &quot;Trusted by teams building modern products&quot;
+        description = &quot;&quot;
+
+        logos = []
+
+        centered = true
+        compact = false
+
+        variant = &quot;strip&quot;
+        grayscale = true
+        showNames = false
+        maxItems = 8
+    &#125;
+
+    view &#123;
+        &lt;section
+            aria-labelledby=&quot;logo-cloud-title&quot;
+            class=&quot;w-full px-5 sm:px-8 lg:px-10 xl:px-12 &#123;class&#125;&quot;
+            class:py-10=&quot;compact&quot;
+            class:sm:py-12=&quot;compact&quot;
+            class:py-14=&quot;!compact&quot;
+            class:sm:py-16=&quot;!compact&quot;
+            class:lg:py-20=&quot;!compact&quot;
+            class:hidden=&quot;logos.length === 0&quot;
+        &gt;
+            &lt;div
+                class=&quot; relative mx-auto w-full max-w-7xl overflow-hidden &#123;variant === 'card' ? 'rounded-3xl border border-indigo-200/80 bg-linear-to-br from-indigo-50/80 via-white to-violet-50/70 shadow-xl shadow-indigo-950/5 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10 dark:shadow-black/20' : '' &#125; &quot;
+            &gt;
+                &lt;!-- Decorative background --&gt;
+                &lt;div
+                    aria-hidden=&quot;true&quot;
+                    class=&quot;pointer-events-none absolute inset-0 overflow-hidden&quot;
+                    class:hidden=&quot;variant !== 'card'&quot;
+                &gt;
+                    &lt;div class=&quot;absolute -right-24 -top-28 h-64 w-64 rounded-full bg-indigo-300/20 blur-3xl dark:bg-indigo-500/10&quot;&gt;&lt;/div&gt;
+
+                    &lt;div class=&quot;absolute -bottom-28 -left-24 h-64 w-64 rounded-full bg-violet-300/15 blur-3xl dark:bg-violet-500/5&quot;&gt;&lt;/div&gt;
+
+                    &lt;div class=&quot;absolute left-1/2 top-0 h-px w-2/3 -translate-x-1/2 bg-linear-to-r from-transparent via-indigo-400/60 to-transparent dark:via-indigo-400/20&quot;&gt;&lt;/div&gt;
+                &lt;/div&gt;
+
+                &lt;div
+                    class=&quot;relative&quot;
+                    class:px-6=&quot;compact&quot;
+                    class:py-8=&quot;compact&quot;
+                    class:sm:px-8=&quot;compact&quot;
+                    class:sm:py-10=&quot;compact&quot;
+                    class:px-7=&quot;!compact&quot;
+                    class:py-10=&quot;!compact&quot;
+                    class:sm:px-10=&quot;!compact&quot;
+                    class:sm:py-12=&quot;!compact&quot;
+                    class:lg:px-12=&quot;!compact&quot;
+                    class:lg:py-14=&quot;!compact&quot;
+                &gt;
+                    &lt;!-- Heading --&gt;
+                    &lt;div
+                        class=&quot;max-w-3xl&quot;
+                        class:mx-auto=&quot;centered&quot;
+                        class:text-center=&quot;centered&quot;
+                    &gt;
+                        &lt;p
+                            class=&quot;text-xs font-bold uppercase tracking-[0.18em] text-indigo-600 dark:text-indigo-400&quot;
+                            class:hidden=&quot;eyebrow === ''&quot;
+                        &gt;
+                            &#123;eyebrow&#125;
+                        &lt;/p&gt;
+
+                        &lt;h2
+                            id=&quot;logo-cloud-title&quot;
+                            class=&quot; font-bold leading-tight tracking-tight text-slate-950 dark:text-white &#123;eyebrow !== '' ? 'mt-3' : ''&#125; &#123;compact ? 'text-2xl sm:text-3xl' : 'text-3xl sm:text-4xl' &#125; &quot;
+                        &gt;
+                            &#123;title&#125;
+                        &lt;/h2&gt;
+
+                        &lt;p
+                            class=&quot; mt-4 text-sm leading-7 text-slate-600 dark:text-slate-400 &#123;centered ? 'mx-auto max-w-2xl' : 'max-w-2xl'&#125; &#123;!compact ? 'sm:text-base' : ''&#125; &quot;
+                            class:hidden=&quot;description === ''&quot;
+                        &gt;
+                            &#123;description&#125;
+                        &lt;/p&gt;
+                    &lt;/div&gt;
+
+                    &lt;!-- Dynamic logo list --&gt;
+                    &lt;div
+                        class=&quot; mt-8 flex flex-wrap justify-center &#123;variant === 'cards' ? 'gap-4 sm:mt-10' : 'items-center gap-x-10 gap-y-7 sm:mt-10 lg:gap-x-14' &#125; &quot;
+                    &gt;
+                        &#123;#each logos.slice(0, maxItems) as logo&#125;
+                        &lt;a
+                            href=&quot;&#123;logo.href&#125;&quot;
+                            target=&quot;&#123;logo.external ? '_blank' : '_self'&#125;&quot;
+                            rel=&quot;&#123;logo.external ? 'noopener noreferrer' : ''&#125;&quot;
+                            aria-label=&quot;&#123;logo.name&#125;&quot;
+                            class=&quot; group min-w-0 transition duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 &#123;variant === 'cards' ? 'flex w-full items-center gap-4 rounded-2xl border border-slate-200/80 bg-white/80 p-4 shadow-sm backdrop-blur-sm hover:-translate-y-1 hover:border-indigo-300 hover:bg-white hover:shadow-lg dark:border-white/10 dark:bg-white/5 dark:hover:border-indigo-500/30 dark:hover:bg-white/10 sm:w-[calc(50%-0.5rem)] lg:w-[calc(25%-0.75rem)]' : 'flex h-12 items-center justify-center px-2 opacity-70 hover:opacity-100' &#125; &quot;
+                        &gt;
+                            &lt;!-- Logo mark --&gt;
+                            &lt;div
+                                class=&quot; flex shrink-0 items-center justify-center &#123;variant === 'cards' ? 'h-12 w-12 rounded-xl bg-slate-50 ring-1 ring-inset ring-slate-200 dark:bg-white/5 dark:ring-white/10' : '' &#125; &quot;
+                            &gt;
+                                &lt;img
+                                    src=&quot;&#123;logo.src&#125;&quot;
+                                    alt=&quot;&#123;logo.alt !== '' ? logo.alt : logo.name&#125;&quot;
+                                    loading=&quot;lazy&quot;
+                                    class=&quot; block object-contain transition duration-200 &#123;variant === 'cards' ? 'max-h-7 max-w-9' : 'max-h-8 max-w-36' &#125; &#123;grayscale ? 'grayscale group-hover:grayscale-0' : '' &#125; &quot;
+                                /&gt;
+
+                                &lt;!-- Fallback mark --&gt;
+                                &lt;span
+                                    class=&quot; hidden h-8 w-8 items-center justify-center rounded-lg bg-indigo-50 text-sm font-bold text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-300 &quot;
+                                &gt;
+                                    &#123;logo.name.slice(0, 1)&#125;
+                                &lt;/span&gt;
+                            &lt;/div&gt;
+
+                            &lt;!-- Partner text --&gt;
+                            &lt;div
+                                class=&quot;min-w-0&quot;
+                                class:hidden=&quot;variant !== 'cards' &amp;&amp; !showNames&quot;
+                            &gt;
+                                &lt;p class=&quot;truncate text-sm font-semibold text-slate-800 dark:text-slate-200&quot;&gt;
+                                    &#123;logo.name&#125;
+                                &lt;/p&gt;
+
+                                &lt;p
+                                    class=&quot;mt-0.5 truncate text-xs text-slate-500 dark:text-slate-400&quot;
+                                    class:hidden=&quot;logo.description === ''&quot;
+                                &gt;
+                                    &#123;logo.description&#125;
+                                &lt;/p&gt;
+                            &lt;/div&gt;
+                        &lt;/a&gt;
+                        &#123;/each&#125;
+                    &lt;/div&gt;
+
+                    &lt;!-- Optional count --&gt;
+                    &lt;p
+                        class=&quot;mt-6 text-sm text-slate-500 dark:text-slate-400&quot;
+                        class:hidden=&quot;logos.length &lt;= maxItems&quot;
+                        class:text-center=&quot;centered&quot;
+                    &gt;
+                        And &#123;logos.length - maxItems&#125; more teams using WRNexusJS.
+                    &lt;/p&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/section&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/logo-upload.wrn b/app/pages/components/logo-upload.wrn
new file mode 100644
index 00000000..fc27eb08
--- /dev/null
+++ b/app/pages/components/logo-upload.wrn
@@ -0,0 +1,34 @@
+page LogoUploadcomponent {
+  seo {
+    title = "LogoUpload component"
+    description = "Reusable logo upload component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LogoUpload</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>LogoUpload</h1><p>Reusable logo upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LogoUpload eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LogoUpload&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LogoUpload.wrn</code></p><pre data-language="wrn"><code>component LogoUpload &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/logo.wrn b/app/pages/components/logo.wrn
new file mode 100644
index 00000000..4f082b38
--- /dev/null
+++ b/app/pages/components/logo.wrn
@@ -0,0 +1,34 @@
+page Logocomponent {
+  seo {
+    title = "Logo component"
+    description = "Reusable logo component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Logo</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>Logo</h1><p>Reusable logo component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Logo eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Logo&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Logo.wrn</code></p><pre data-language="wrn"><code>component Logo &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/logout-dialog.wrn b/app/pages/components/logout-dialog.wrn
new file mode 100644
index 00000000..2bc57328
--- /dev/null
+++ b/app/pages/components/logout-dialog.wrn
@@ -0,0 +1,31 @@
+page LogoutDialogcomponent {
+  seo {
+    title = "LogoutDialog component"
+    description = "Reusable logout dialog component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LogoutDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>LogoutDialog</h1><p>Reusable logout dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LogoutDialog title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LogoutDialog&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LogoutDialog.wrn</code></p><pre data-language="wrn"><code>component LogoutDialog &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/longitude-input.wrn b/app/pages/components/longitude-input.wrn
new file mode 100644
index 00000000..f1f72b48
--- /dev/null
+++ b/app/pages/components/longitude-input.wrn
@@ -0,0 +1,37 @@
+page LongitudeInputcomponent {
+  seo {
+    title = "LongitudeInput component"
+    description = "Reusable longitude input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LongitudeInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>LongitudeInput</h1><p>Reusable longitude input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LongitudeInput label=&quot;Longitude&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LongitudeInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Longitude&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LongitudeInput.wrn</code></p><pre data-language="wrn"><code>component LongitudeInput &#123;
+  props &#123;
+    label = &quot;Longitude&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/maintenance-alert.wrn b/app/pages/components/maintenance-alert.wrn
new file mode 100644
index 00000000..0417d71b
--- /dev/null
+++ b/app/pages/components/maintenance-alert.wrn
@@ -0,0 +1,32 @@
+page MaintenanceAlertcomponent {
+  seo {
+    title = "MaintenanceAlert component"
+    description = "Reusable maintenance alert component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MaintenanceAlert</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>MaintenanceAlert</h1><p>Reusable maintenance alert component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MaintenanceAlert label=&quot;Maintenance&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MaintenanceAlert&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Maintenance&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MaintenanceAlert.wrn</code></p><pre data-language="wrn"><code>component MaintenanceAlert &#123;
+  props &#123;
+    label = &quot;Maintenance&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/maintenance-banner.wrn b/app/pages/components/maintenance-banner.wrn
new file mode 100644
index 00000000..483ce740
--- /dev/null
+++ b/app/pages/components/maintenance-banner.wrn
@@ -0,0 +1,32 @@
+page MaintenanceBannercomponent {
+  seo {
+    title = "MaintenanceBanner component"
+    description = "Reusable maintenance banner component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MaintenanceBanner</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>MaintenanceBanner</h1><p>Reusable maintenance banner component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MaintenanceBanner label=&quot;Maintenance&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MaintenanceBanner&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Maintenance&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MaintenanceBanner.wrn</code></p><pre data-language="wrn"><code>component MaintenanceBanner &#123;
+  props &#123;
+    label = &quot;Maintenance&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/maintenance-card.wrn b/app/pages/components/maintenance-card.wrn
new file mode 100644
index 00000000..d7940f5a
--- /dev/null
+++ b/app/pages/components/maintenance-card.wrn
@@ -0,0 +1,34 @@
+page MaintenanceCardcomponent {
+  seo {
+    title = "MaintenanceCard component"
+    description = "Reusable maintenance card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MaintenanceCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>MaintenanceCard</h1><p>Reusable maintenance card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MaintenanceCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MaintenanceCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MaintenanceCard.wrn</code></p><pre data-language="wrn"><code>component MaintenanceCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/maintenance-page.wrn b/app/pages/components/maintenance-page.wrn
new file mode 100644
index 00000000..8654e48c
--- /dev/null
+++ b/app/pages/components/maintenance-page.wrn
@@ -0,0 +1,34 @@
+page MaintenancePagecomponent {
+  seo {
+    title = "MaintenancePage component"
+    description = "Reusable maintenance page component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MaintenancePage</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>MaintenancePage</h1><p>Reusable maintenance page component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MaintenancePage eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MaintenancePage&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MaintenancePage.wrn</code></p><pre data-language="wrn"><code>component MaintenancePage &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/maintenance-state.wrn b/app/pages/components/maintenance-state.wrn
new file mode 100644
index 00000000..f703cc4b
--- /dev/null
+++ b/app/pages/components/maintenance-state.wrn
@@ -0,0 +1,32 @@
+page MaintenanceStatecomponent {
+  seo {
+    title = "MaintenanceState component"
+    description = "Reusable maintenance state component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MaintenanceState</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>MaintenanceState</h1><p>Reusable maintenance state component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MaintenanceState label=&quot;Maintenance&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MaintenanceState&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Maintenance&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MaintenanceState.wrn</code></p><pre data-language="wrn"><code>component MaintenanceState &#123;
+  props &#123;
+    label = &quot;Maintenance&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/maintenance-window-picker.wrn b/app/pages/components/maintenance-window-picker.wrn
new file mode 100644
index 00000000..89e31cc2
--- /dev/null
+++ b/app/pages/components/maintenance-window-picker.wrn
@@ -0,0 +1,37 @@
+page MaintenanceWindowPickercomponent {
+  seo {
+    title = "MaintenanceWindowPicker component"
+    description = "Reusable maintenance window picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MaintenanceWindowPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>MaintenanceWindowPicker</h1><p>Reusable maintenance window picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MaintenanceWindowPicker label=&quot;MaintenanceWindow&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MaintenanceWindowPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;MaintenanceWindow&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MaintenanceWindowPicker.wrn</code></p><pre data-language="wrn"><code>component MaintenanceWindowPicker &#123;
+  props &#123;
+    label = &quot;MaintenanceWindow&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/map-picker.wrn b/app/pages/components/map-picker.wrn
new file mode 100644
index 00000000..0e0bfb5b
--- /dev/null
+++ b/app/pages/components/map-picker.wrn
@@ -0,0 +1,37 @@
+page MapPickercomponent {
+  seo {
+    title = "MapPicker component"
+    description = "Reusable map picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MapPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>MapPicker</h1><p>Reusable map picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MapPicker label=&quot;Map&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MapPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Map&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MapPicker.wrn</code></p><pre data-language="wrn"><code>component MapPicker &#123;
+  props &#123;
+    label = &quot;Map&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/markdown-editor.wrn b/app/pages/components/markdown-editor.wrn
new file mode 100644
index 00000000..dbd7775c
--- /dev/null
+++ b/app/pages/components/markdown-editor.wrn
@@ -0,0 +1,37 @@
+page MarkdownEditorcomponent {
+  seo {
+    title = "MarkdownEditor component"
+    description = "Reusable markdown editor component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MarkdownEditor</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>MarkdownEditor</h1><p>Reusable markdown editor component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MarkdownEditor label=&quot;Markdown&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MarkdownEditor&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Markdown&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MarkdownEditor.wrn</code></p><pre data-language="wrn"><code>component MarkdownEditor &#123;
+  props &#123;
+    label = &quot;Markdown&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/marketing-page-shell.wrn b/app/pages/components/marketing-page-shell.wrn
new file mode 100644
index 00000000..4142dfac
--- /dev/null
+++ b/app/pages/components/marketing-page-shell.wrn
@@ -0,0 +1,27 @@
+page MarketingPageShellcomponent {
+  seo {
+    title = "MarketingPageShell component"
+    description = "Reusable marketing page shell component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MarketingPageShell</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>MarketingPageShell</h1><p>Reusable marketing page shell component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MarketingPageShell /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MarketingPageShell&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MarketingPageShell.wrn</code></p><pre data-language="wrn"><code>component MarketingPageShell &#123;
+  props &#123;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-page-shell wire-page-shell--marketing &#123;class&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/marketing-section-header.wrn b/app/pages/components/marketing-section-header.wrn
new file mode 100644
index 00000000..c0864476
--- /dev/null
+++ b/app/pages/components/marketing-section-header.wrn
@@ -0,0 +1,31 @@
+page MarketingSectionHeadercomponent {
+  seo {
+    title = "MarketingSectionHeader component"
+    description = "Reusable marketing section header component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MarketingSectionHeader</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>MarketingSectionHeader</h1><p>Reusable marketing section header component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MarketingSectionHeader eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MarketingSectionHeader&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MarketingSectionHeader.wrn</code></p><pre data-language="wrn"><code>component MarketingSectionHeader &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/masked-secret-field.wrn b/app/pages/components/masked-secret-field.wrn
new file mode 100644
index 00000000..399ecc6c
--- /dev/null
+++ b/app/pages/components/masked-secret-field.wrn
@@ -0,0 +1,37 @@
+page MaskedSecretFieldcomponent {
+  seo {
+    title = "MaskedSecretField component"
+    description = "Reusable masked secret field component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MaskedSecretField</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>MaskedSecretField</h1><p>Reusable masked secret field component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MaskedSecretField label=&quot;MaskedSecret&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MaskedSecretField&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;MaskedSecret&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MaskedSecretField.wrn</code></p><pre data-language="wrn"><code>component MaskedSecretField &#123;
+  props &#123;
+    label = &quot;MaskedSecret&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/mega-menu.wrn b/app/pages/components/mega-menu.wrn
new file mode 100644
index 00000000..05819309
--- /dev/null
+++ b/app/pages/components/mega-menu.wrn
@@ -0,0 +1,32 @@
+page MegaMenucomponent {
+  seo {
+    title = "MegaMenu component"
+    description = "Reusable mega menu component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MegaMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>MegaMenu</h1><p>Reusable mega menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>0 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MegaMenu label=&quot;Explore&quot; sections=&quot;[]&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MegaMenu&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Explore&quot;</code></td></tr><tr><td><code>sections</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MegaMenu.wrn</code></p><pre data-language="wrn"><code>component MegaMenu &#123;
+  props &#123;
+    label = &quot;Explore&quot;
+    sections = []
+    class = &quot;&quot;
+  &#125;
+  state open = false
+  view &#123;
+    &lt;div class=&quot;wire-mega-menu &#123;class&#125;&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;wire-mega-menu__trigger&quot; aria-expanded=&quot;&#123;open&#125;&quot; @click=&quot;open = !open&quot;&gt;&#123;label&#125;&lt;span aria-hidden=&quot;true&quot;&gt;⌄&lt;/span&gt;&lt;/button&gt;&lt;div data-show=&quot;open&quot; class=&quot;wire-mega-menu__panel&quot;&gt;&#123;#each sections as section&#125;&lt;section&gt;&lt;h3&gt;&#123;section.title&#125;&lt;/h3&gt;&lt;ul&gt;&#123;#each section.items as item&#125;&lt;li&gt;&lt;a href=&quot;&#123;item.href&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;&lt;/li&gt;&#123;/each&#125;&lt;/ul&gt;&lt;/section&gt;&#123;/each&#125;&lt;/div&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/member-list.wrn b/app/pages/components/member-list.wrn
new file mode 100644
index 00000000..e5ce2295
--- /dev/null
+++ b/app/pages/components/member-list.wrn
@@ -0,0 +1,31 @@
+page MemberListcomponent {
+  seo {
+    title = "MemberList component"
+    description = "Reusable member list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MemberList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>MemberList</h1><p>Reusable member list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MemberList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MemberList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MemberList.wrn</code></p><pre data-language="wrn"><code>component MemberList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/mention-input.wrn b/app/pages/components/mention-input.wrn
new file mode 100644
index 00000000..6ec967ac
--- /dev/null
+++ b/app/pages/components/mention-input.wrn
@@ -0,0 +1,37 @@
+page MentionInputcomponent {
+  seo {
+    title = "MentionInput component"
+    description = "Reusable mention input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MentionInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>MentionInput</h1><p>Reusable mention input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MentionInput label=&quot;Mention&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MentionInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Mention&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MentionInput.wrn</code></p><pre data-language="wrn"><code>component MentionInput &#123;
+  props &#123;
+    label = &quot;Mention&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/message-character-counter.wrn b/app/pages/components/message-character-counter.wrn
new file mode 100644
index 00000000..23d25363
--- /dev/null
+++ b/app/pages/components/message-character-counter.wrn
@@ -0,0 +1,32 @@
+page MessageCharacterCountercomponent {
+  seo {
+    title = "MessageCharacterCounter component"
+    description = "Reusable message character counter component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MessageCharacterCounter</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>MessageCharacterCounter</h1><p>Reusable message character counter component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MessageCharacterCounter label=&quot;MessageCharacter&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MessageCharacterCounter&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;MessageCharacter&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MessageCharacterCounter.wrn</code></p><pre data-language="wrn"><code>component MessageCharacterCounter &#123;
+  props &#123;
+    label = &quot;MessageCharacter&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/message-composer-preview.wrn b/app/pages/components/message-composer-preview.wrn
new file mode 100644
index 00000000..bee925da
--- /dev/null
+++ b/app/pages/components/message-composer-preview.wrn
@@ -0,0 +1,34 @@
+page MessageComposerPreviewcomponent {
+  seo {
+    title = "MessageComposerPreview component"
+    description = "Reusable message composer preview component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MessageComposerPreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>MessageComposerPreview</h1><p>Reusable message composer preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MessageComposerPreview eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MessageComposerPreview&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MessageComposerPreview.wrn</code></p><pre data-language="wrn"><code>component MessageComposerPreview &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/message-composer.wrn b/app/pages/components/message-composer.wrn
new file mode 100644
index 00000000..0d3190ff
--- /dev/null
+++ b/app/pages/components/message-composer.wrn
@@ -0,0 +1,34 @@
+page MessageComposercomponent {
+  seo {
+    title = "MessageComposer component"
+    description = "Reusable message composer component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MessageComposer</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>MessageComposer</h1><p>Reusable message composer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MessageComposer eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MessageComposer&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MessageComposer.wrn</code></p><pre data-language="wrn"><code>component MessageComposer &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/message-limit-input.wrn b/app/pages/components/message-limit-input.wrn
new file mode 100644
index 00000000..3cc4ad00
--- /dev/null
+++ b/app/pages/components/message-limit-input.wrn
@@ -0,0 +1,37 @@
+page MessageLimitInputcomponent {
+  seo {
+    title = "MessageLimitInput component"
+    description = "Reusable message limit input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MessageLimitInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>MessageLimitInput</h1><p>Reusable message limit input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MessageLimitInput label=&quot;MessageLimit&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MessageLimitInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;MessageLimit&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MessageLimitInput.wrn</code></p><pre data-language="wrn"><code>component MessageLimitInput &#123;
+  props &#123;
+    label = &quot;MessageLimit&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/message-preview.wrn b/app/pages/components/message-preview.wrn
new file mode 100644
index 00000000..29804211
--- /dev/null
+++ b/app/pages/components/message-preview.wrn
@@ -0,0 +1,34 @@
+page MessagePreviewcomponent {
+  seo {
+    title = "MessagePreview component"
+    description = "Reusable message preview component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MessagePreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>MessagePreview</h1><p>Reusable message preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MessagePreview eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MessagePreview&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MessagePreview.wrn</code></p><pre data-language="wrn"><code>component MessagePreview &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/message-volume-slider.wrn b/app/pages/components/message-volume-slider.wrn
new file mode 100644
index 00000000..d2663538
--- /dev/null
+++ b/app/pages/components/message-volume-slider.wrn
@@ -0,0 +1,34 @@
+page MessageVolumeSlidercomponent {
+  seo {
+    title = "MessageVolumeSlider component"
+    description = "Reusable message volume slider component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MessageVolumeSlider</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>MessageVolumeSlider</h1><p>Reusable message volume slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MessageVolumeSlider eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MessageVolumeSlider&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MessageVolumeSlider.wrn</code></p><pre data-language="wrn"><code>component MessageVolumeSlider &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/metric-card.wrn b/app/pages/components/metric-card.wrn
new file mode 100644
index 00000000..d60cf166
--- /dev/null
+++ b/app/pages/components/metric-card.wrn
@@ -0,0 +1,34 @@
+page MetricCardcomponent {
+  seo {
+    title = "MetricCard component"
+    description = "Reusable metric card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MetricCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>MetricCard</h1><p>Reusable metric card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MetricCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MetricCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MetricCard.wrn</code></p><pre data-language="wrn"><code>component MetricCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/metric-grid.wrn b/app/pages/components/metric-grid.wrn
new file mode 100644
index 00000000..1e492edb
--- /dev/null
+++ b/app/pages/components/metric-grid.wrn
@@ -0,0 +1,29 @@
+page MetricGridcomponent {
+  seo {
+    title = "MetricGrid component"
+    description = "Reusable metric grid component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MetricGrid</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>MetricGrid</h1><p>Reusable metric grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MetricGrid label=&quot;Key metrics&quot; metrics=&quot;[]&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MetricGrid&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Key metrics&quot;</code></td></tr><tr><td><code>metrics</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MetricGrid.wrn</code></p><pre data-language="wrn"><code>component MetricGrid &#123;
+  props &#123;
+    label = &quot;Key metrics&quot;
+    metrics = []
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section aria-label=&quot;&#123;label&#125;&quot; class=&quot;wire-metric-grid &#123;class&#125;&quot;&gt;&#123;#each metrics as metric&#125;&lt;article class=&quot;wire-metric&quot;&gt;&lt;p class=&quot;wire-metric__value&quot;&gt;&#123;metric.value&#125;&lt;/p&gt;&lt;p class=&quot;wire-metric__label&quot;&gt;&#123;metric.label&#125;&lt;/p&gt;&lt;p data-show=&quot;metric.description&quot; class=&quot;wire-metric__description&quot;&gt;&#123;metric.description&#125;&lt;/p&gt;&lt;/article&gt;&#123;/each&#125;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/metric-text.wrn b/app/pages/components/metric-text.wrn
new file mode 100644
index 00000000..72f08328
--- /dev/null
+++ b/app/pages/components/metric-text.wrn
@@ -0,0 +1,29 @@
+page MetricTextcomponent {
+  seo {
+    title = "MetricText component"
+    description = "Reusable metric text component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MetricText</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>MetricText</h1><p>Reusable metric text component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MetricText text=&quot;text&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MetricText&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>text</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MetricText.wrn</code></p><pre data-language="wrn"><code>component MetricText &#123;
+  props &#123;
+    text = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-type wire-type--display wire-text--&#123;align&#125;  &#123;class&#125;&quot;&gt;&#123;text&#125;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/metric.wrn b/app/pages/components/metric.wrn
new file mode 100644
index 00000000..e70b4bde
--- /dev/null
+++ b/app/pages/components/metric.wrn
@@ -0,0 +1,32 @@
+page Metriccomponent {
+  seo {
+    title = "Metric component"
+    description = "Reusable metric component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Metric</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>Metric</h1><p>Reusable metric component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Metric title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Metric&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Metric.wrn</code></p><pre data-language="wrn"><code>component Metric &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/minute-picker.wrn b/app/pages/components/minute-picker.wrn
new file mode 100644
index 00000000..0a252e9b
--- /dev/null
+++ b/app/pages/components/minute-picker.wrn
@@ -0,0 +1,37 @@
+page MinutePickercomponent {
+  seo {
+    title = "MinutePicker component"
+    description = "Reusable minute picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MinutePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>MinutePicker</h1><p>Reusable minute picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MinutePicker label=&quot;Minute&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MinutePicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Minute&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MinutePicker.wrn</code></p><pre data-language="wrn"><code>component MinutePicker &#123;
+  props &#123;
+    label = &quot;Minute&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/mission-section.wrn b/app/pages/components/mission-section.wrn
new file mode 100644
index 00000000..3f18882a
--- /dev/null
+++ b/app/pages/components/mission-section.wrn
@@ -0,0 +1,31 @@
+page MissionSectioncomponent {
+  seo {
+    title = "MissionSection component"
+    description = "Reusable mission section component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MissionSection</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>MissionSection</h1><p>Reusable mission section component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MissionSection eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MissionSection&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MissionSection.wrn</code></p><pre data-language="wrn"><code>component MissionSection &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/mobile-device-frame.wrn b/app/pages/components/mobile-device-frame.wrn
new file mode 100644
index 00000000..d566ac26
--- /dev/null
+++ b/app/pages/components/mobile-device-frame.wrn
@@ -0,0 +1,31 @@
+page MobileDeviceFramecomponent {
+  seo {
+    title = "MobileDeviceFrame component"
+    description = "Reusable mobile device frame component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MobileDeviceFrame</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>MobileDeviceFrame</h1><p>Reusable mobile device frame component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MobileDeviceFrame eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MobileDeviceFrame&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MobileDeviceFrame.wrn</code></p><pre data-language="wrn"><code>component MobileDeviceFrame &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/mobile-input.wrn b/app/pages/components/mobile-input.wrn
new file mode 100644
index 00000000..cfbed6dd
--- /dev/null
+++ b/app/pages/components/mobile-input.wrn
@@ -0,0 +1,37 @@
+page MobileInputcomponent {
+  seo {
+    title = "MobileInput component"
+    description = "Reusable mobile input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MobileInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>MobileInput</h1><p>Reusable mobile input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MobileInput label=&quot;Mobile&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MobileInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Mobile&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MobileInput.wrn</code></p><pre data-language="wrn"><code>component MobileInput &#123;
+  props &#123;
+    label = &quot;Mobile&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/mobile-menu-button.wrn b/app/pages/components/mobile-menu-button.wrn
new file mode 100644
index 00000000..b33408c6
--- /dev/null
+++ b/app/pages/components/mobile-menu-button.wrn
@@ -0,0 +1,32 @@
+page MobileMenuButtoncomponent {
+  seo {
+    title = "MobileMenuButton component"
+    description = "Reusable mobile menu button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MobileMenuButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>MobileMenuButton</h1><p>Reusable mobile menu button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MobileMenuButton label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MobileMenuButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MobileMenuButton.wrn</code></p><pre data-language="wrn"><code>component MobileMenuButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/mobile-navigation.wrn b/app/pages/components/mobile-navigation.wrn
new file mode 100644
index 00000000..6a3bfbd8
--- /dev/null
+++ b/app/pages/components/mobile-navigation.wrn
@@ -0,0 +1,33 @@
+page MobileNavigationcomponent {
+  seo {
+    title = "MobileNavigation component"
+    description = "Reusable mobile navigation component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MobileNavigation</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>MobileNavigation</h1><p>Reusable mobile navigation component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>0 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MobileNavigation label=&quot;Menu&quot; closeLabel=&quot;Close menu&quot; items=&quot;[]&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MobileNavigation&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Menu&quot;</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close menu&quot;</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MobileNavigation.wrn</code></p><pre data-language="wrn"><code>component MobileNavigation &#123;
+  props &#123;
+    label = &quot;Menu&quot;
+    closeLabel = &quot;Close menu&quot;
+    items = []
+    class = &quot;&quot;
+  &#125;
+  state open = false
+  view &#123;
+    &lt;div class=&quot;wire-mobile-nav &#123;class&#125;&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot; aria-expanded=&quot;&#123;open&#125;&quot; aria-controls=&quot;wire-mobile-navigation&quot; @click=&quot;open = !open&quot;&gt;&#123;open ? closeLabel : label&#125;&lt;/button&gt;&lt;nav id=&quot;wire-mobile-navigation&quot; data-show=&quot;open&quot; aria-label=&quot;Mobile navigation&quot; class=&quot;wire-mobile-nav__panel&quot;&gt;&lt;ul&gt;&#123;#each items as item&#125;&lt;li&gt;&lt;a href=&quot;&#123;item.href&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;&lt;/li&gt;&#123;/each&#125;&lt;/ul&gt;&lt;/nav&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/mobile-table-card.wrn b/app/pages/components/mobile-table-card.wrn
new file mode 100644
index 00000000..250dee1d
--- /dev/null
+++ b/app/pages/components/mobile-table-card.wrn
@@ -0,0 +1,34 @@
+page MobileTableCardcomponent {
+  seo {
+    title = "MobileTableCard component"
+    description = "Reusable mobile table card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MobileTableCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>MobileTableCard</h1><p>Reusable mobile table card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MobileTableCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MobileTableCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MobileTableCard.wrn</code></p><pre data-language="wrn"><code>component MobileTableCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/modal.wrn b/app/pages/components/modal.wrn
new file mode 100644
index 00000000..1fcd42b6
--- /dev/null
+++ b/app/pages/components/modal.wrn
@@ -0,0 +1,35 @@
+page Modalcomponent {
+  seo {
+    title = "Modal component"
+    description = "Reusable modal component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Modal</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Modal</h1><p>Reusable modal component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Modal title=&quot;Dialog&quot; description=&quot;description&quot; open=&quot;false&quot; size=&quot;md&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Modal&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Dialog&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&quot;</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Modal.wrn</code></p><pre data-language="wrn"><code>component Modal &#123;
+  props &#123;
+    class = &quot;&quot;
+    title = &quot;Dialog&quot;
+    description = &quot;&quot;
+    open = false
+    size = &quot;md&quot;
+    closeLabel = &quot;Close&quot;
+  &#125;
+  state visible = open
+  view &#123;
+    &lt;div data-show=&quot;visible&quot; class=&quot;fixed inset-0 z-50 flex items-end justify-center p-4 sm:items-center &#123;class&#125;&quot; role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-labelledby=&quot;modal-title&quot;&gt;&lt;button class=&quot;absolute inset-0 bg-slate-950/60 backdrop-blur-sm&quot; aria-label=&quot;&#123;closeLabel&#125;&quot; @click=&quot;visible = false&quot;&gt;&lt;/button&gt;&lt;section class=&quot;relative max-h-[90vh] w-full overflow-auto rounded-3xl border border-slate-200 bg-white p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900 &#123;size === 'sm' ? 'max-w-md' : size === 'lg' ? 'max-w-4xl' : 'max-w-2xl'&#125;&quot;&gt;&lt;header class=&quot;flex items-start justify-between gap-4&quot;&gt;&lt;div&gt;&lt;h2 id=&quot;modal-title&quot; class=&quot;text-xl font-bold&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;mt-1 text-sm text-slate-500&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; aria-label=&quot;&#123;closeLabel&#125;&quot; @click=&quot;visible = false&quot; class=&quot;inline-flex size-10 items-center justify-center rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800&quot;&gt;×&lt;/button&gt;&lt;/header&gt;&lt;div class=&quot;mt-5&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;/section&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/month-picker.wrn b/app/pages/components/month-picker.wrn
new file mode 100644
index 00000000..a783dfde
--- /dev/null
+++ b/app/pages/components/month-picker.wrn
@@ -0,0 +1,37 @@
+page MonthPickercomponent {
+  seo {
+    title = "MonthPicker component"
+    description = "Reusable month picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MonthPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>MonthPicker</h1><p>Reusable month picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MonthPicker label=&quot;Month&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MonthPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Month&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MonthPicker.wrn</code></p><pre data-language="wrn"><code>component MonthPicker &#123;
+  props &#123;
+    label = &quot;Month&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/month-year-picker.wrn b/app/pages/components/month-year-picker.wrn
new file mode 100644
index 00000000..8efa72ef
--- /dev/null
+++ b/app/pages/components/month-year-picker.wrn
@@ -0,0 +1,37 @@
+page MonthYearPickercomponent {
+  seo {
+    title = "MonthYearPicker component"
+    description = "Reusable month year picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MonthYearPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>MonthYearPicker</h1><p>Reusable month year picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MonthYearPicker label=&quot;MonthYear&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MonthYearPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;MonthYear&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MonthYearPicker.wrn</code></p><pre data-language="wrn"><code>component MonthYearPicker &#123;
+  props &#123;
+    label = &quot;MonthYear&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/monthly-volume-selector.wrn b/app/pages/components/monthly-volume-selector.wrn
new file mode 100644
index 00000000..048b600c
--- /dev/null
+++ b/app/pages/components/monthly-volume-selector.wrn
@@ -0,0 +1,37 @@
+page MonthlyVolumeSelectorcomponent {
+  seo {
+    title = "MonthlyVolumeSelector component"
+    description = "Reusable monthly volume selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MonthlyVolumeSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>MonthlyVolumeSelector</h1><p>Reusable monthly volume selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MonthlyVolumeSelector label=&quot;MonthlyVolume&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MonthlyVolumeSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;MonthlyVolume&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MonthlyVolumeSelector.wrn</code></p><pre data-language="wrn"><code>component MonthlyVolumeSelector &#123;
+  props &#123;
+    label = &quot;MonthlyVolume&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/multi-file-upload.wrn b/app/pages/components/multi-file-upload.wrn
new file mode 100644
index 00000000..0803ef48
--- /dev/null
+++ b/app/pages/components/multi-file-upload.wrn
@@ -0,0 +1,34 @@
+page MultiFileUploadcomponent {
+  seo {
+    title = "MultiFileUpload component"
+    description = "Reusable multi file upload component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MultiFileUpload</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>MultiFileUpload</h1><p>Reusable multi file upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MultiFileUpload eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MultiFileUpload&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MultiFileUpload.wrn</code></p><pre data-language="wrn"><code>component MultiFileUpload &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/multi-select.wrn b/app/pages/components/multi-select.wrn
new file mode 100644
index 00000000..89ed6f0e
--- /dev/null
+++ b/app/pages/components/multi-select.wrn
@@ -0,0 +1,36 @@
+page MultiSelectcomponent {
+  seo {
+    title = "MultiSelect component"
+    description = "Reusable multi select component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MultiSelect</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>MultiSelect</h1><p>Reusable multi select component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MultiSelect id=&quot;multi-select&quot; name=&quot;name&quot; label=&quot;Choose options&quot; options=&quot;[]&quot; required=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MultiSelect&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;multi-select&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Choose options&quot;</code></td></tr><tr><td><code>options</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>size</code></td><td><code>number</code></td><td>Optional</td><td><code>5</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MultiSelect.wrn</code></p><pre data-language="wrn"><code>component MultiSelect &#123;
+  props &#123;
+    id = &quot;multi-select&quot;
+    name = &quot;&quot;
+    label = &quot;Choose options&quot;
+    options = []
+    required = false
+    disabled = false
+    size = 5
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;wire-field &#123;class&#125;&quot;&gt;&lt;label for=&quot;&#123;id&#125;&quot; class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;/label&gt;&lt;select id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; multiple required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; size=&quot;&#123;size&#125;&quot; class=&quot;wire-input wire-multiselect&quot;&gt;&#123;#each options as option&#125;&lt;option value=&quot;&#123;option.value&#125;&quot; selected=&quot;&#123;option.selected&#125;&quot;&gt;&#123;option.label&#125;&lt;/option&gt;&#123;/each&#125;&lt;/select&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/multiple-email-input.wrn b/app/pages/components/multiple-email-input.wrn
new file mode 100644
index 00000000..2b75a589
--- /dev/null
+++ b/app/pages/components/multiple-email-input.wrn
@@ -0,0 +1,37 @@
+page MultipleEmailInputcomponent {
+  seo {
+    title = "MultipleEmailInput component"
+    description = "Reusable multiple email input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MultipleEmailInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>MultipleEmailInput</h1><p>Reusable multiple email input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MultipleEmailInput label=&quot;MultipleEmail&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MultipleEmailInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;MultipleEmail&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MultipleEmailInput.wrn</code></p><pre data-language="wrn"><code>component MultipleEmailInput &#123;
+  props &#123;
+    label = &quot;MultipleEmail&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/muted-text.wrn b/app/pages/components/muted-text.wrn
new file mode 100644
index 00000000..ff9d232c
--- /dev/null
+++ b/app/pages/components/muted-text.wrn
@@ -0,0 +1,29 @@
+page MutedTextcomponent {
+  seo {
+    title = "MutedText component"
+    description = "Reusable muted text component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MutedText</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>MutedText</h1><p>Reusable muted text component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;MutedText text=&quot;text&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;MutedText&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>text</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MutedText.wrn</code></p><pre data-language="wrn"><code>component MutedText &#123;
+  props &#123;
+    text = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-type wire-type--small wire-text--&#123;align&#125; wire-muted &#123;class&#125;&quot;&gt;&#123;text&#125;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/name-input.wrn b/app/pages/components/name-input.wrn
new file mode 100644
index 00000000..c6680fa5
--- /dev/null
+++ b/app/pages/components/name-input.wrn
@@ -0,0 +1,37 @@
+page NameInputcomponent {
+  seo {
+    title = "NameInput component"
+    description = "Reusable name input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">NameInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>NameInput</h1><p>Reusable name input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;NameInput label=&quot;Name&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;NameInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Name&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/NameInput.wrn</code></p><pre data-language="wrn"><code>component NameInput &#123;
+  props &#123;
+    label = &quot;Name&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/narrow-container.wrn b/app/pages/components/narrow-container.wrn
new file mode 100644
index 00000000..df3d2c76
--- /dev/null
+++ b/app/pages/components/narrow-container.wrn
@@ -0,0 +1,27 @@
+page NarrowContainercomponent {
+  seo {
+    title = "NarrowContainer component"
+    description = "Reusable narrow container component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">NarrowContainer</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>NarrowContainer</h1><p>Reusable narrow container component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;NarrowContainer /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;NarrowContainer&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/NarrowContainer.wrn</code></p><pre data-language="wrn"><code>component NarrowContainer &#123;
+  props &#123;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-container wire-container--narrow &#123;class&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/navigation-item.wrn b/app/pages/components/navigation-item.wrn
new file mode 100644
index 00000000..4b0d1563
--- /dev/null
+++ b/app/pages/components/navigation-item.wrn
@@ -0,0 +1,34 @@
+page NavigationItemcomponent {
+  seo {
+    title = "NavigationItem component"
+    description = "Reusable navigation item component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">NavigationItem</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>NavigationItem</h1><p>Reusable navigation item component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;NavigationItem eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;NavigationItem&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/NavigationItem.wrn</code></p><pre data-language="wrn"><code>component NavigationItem &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/navigation-mega-menu.wrn b/app/pages/components/navigation-mega-menu.wrn
new file mode 100644
index 00000000..087acb91
--- /dev/null
+++ b/app/pages/components/navigation-mega-menu.wrn
@@ -0,0 +1,31 @@
+page NavigationMegaMenucomponent {
+  seo {
+    title = "NavigationMegaMenu component"
+    description = "Reusable navigation mega menu component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">NavigationMegaMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>NavigationMegaMenu</h1><p>Reusable navigation mega menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;NavigationMegaMenu title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;NavigationMegaMenu&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/NavigationMegaMenu.wrn</code></p><pre data-language="wrn"><code>component NavigationMegaMenu &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/navigation.wrn b/app/pages/components/navigation.wrn
new file mode 100644
index 00000000..e974fc09
--- /dev/null
+++ b/app/pages/components/navigation.wrn
@@ -0,0 +1,31 @@
+page Navigationcomponent {
+  seo {
+    title = "Navigation component"
+    description = "Reusable navigation component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Navigation</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Navigation</h1><p>Reusable navigation component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Navigation eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Navigation&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Navigation.wrn</code></p><pre data-language="wrn"><code>component Navigation &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/new-badge.wrn b/app/pages/components/new-badge.wrn
new file mode 100644
index 00000000..24974424
--- /dev/null
+++ b/app/pages/components/new-badge.wrn
@@ -0,0 +1,29 @@
+page NewBadgecomponent {
+  seo {
+    title = "NewBadge component"
+    description = "Reusable new badge component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">NewBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>NewBadge</h1><p>Reusable new badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;NewBadge label=&quot;New&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;NewBadge&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;New&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/NewBadge.wrn</code></p><pre data-language="wrn"><code>component NewBadge &#123;
+  props &#123;
+    label = &quot;New&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-badge wire-badge--&#123;variant&#125; wire-catalog-badge wire-catalog-badge--newbadge &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/new-password-input.wrn b/app/pages/components/new-password-input.wrn
new file mode 100644
index 00000000..9d3a7cca
--- /dev/null
+++ b/app/pages/components/new-password-input.wrn
@@ -0,0 +1,37 @@
+page NewPasswordInputcomponent {
+  seo {
+    title = "NewPasswordInput component"
+    description = "Reusable new password input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">NewPasswordInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>NewPasswordInput</h1><p>Reusable new password input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;NewPasswordInput label=&quot;NewPassword&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;NewPasswordInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;NewPassword&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/NewPasswordInput.wrn</code></p><pre data-language="wrn"><code>component NewPasswordInput &#123;
+  props &#123;
+    label = &quot;NewPassword&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/newsletter-cta.wrn b/app/pages/components/newsletter-cta.wrn
new file mode 100644
index 00000000..4bf8b4ba
--- /dev/null
+++ b/app/pages/components/newsletter-cta.wrn
@@ -0,0 +1,32 @@
+page NewsletterCTAcomponent {
+  seo {
+    title = "NewsletterCTA component"
+    description = "Reusable newsletter c t a component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">NewsletterCTA</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>NewsletterCTA</h1><p>Reusable newsletter c t a component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;NewsletterCTA label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;NewsletterCTA&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/NewsletterCTA.wrn</code></p><pre data-language="wrn"><code>component NewsletterCTA &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/newsletter-form.wrn b/app/pages/components/newsletter-form.wrn
new file mode 100644
index 00000000..bd3e3561
--- /dev/null
+++ b/app/pages/components/newsletter-form.wrn
@@ -0,0 +1,235 @@
+page NewsletterFormcomponent {
+  seo {
+    title = "NewsletterForm component"
+    description = "Reusable newsletter form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">NewsletterForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>NewsletterForm</h1><p>Reusable newsletter form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>19 props</span><span>0 slots</span><span>2 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;NewsletterForm eyebrow=&quot;eyebrow&quot; title=&quot;Stay up to date&quot; description=&quot;description&quot; placeholder=&quot;Enter your email&quot; buttonLabel=&quot;Subscribe&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;NewsletterForm&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Stay up to date&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Enter your email&quot;</code></td></tr><tr><td><code>buttonLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Subscribe&quot;</code></td></tr><tr><td><code>action</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;/newsletter/subscribe&quot;</code></td></tr><tr><td><code>method</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;post&quot;</code></td></tr><tr><td><code>emailName</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;email&quot;</code></td></tr><tr><td><code>privacyLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>privacyHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;/privacy&quot;</code></td></tr><tr><td><code>successMessage</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;You are subscribed.&quot;</code></td></tr><tr><td><code>errorMessage</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Something went wrong. Please try again.&quot;</code></td></tr><tr><td><code>iconClass</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;icon-[lucide--mail]&quot;</code></td></tr><tr><td><code>centered</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>compact</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>showIcon</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>showPrivacy</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>fullWidth</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>submit</code></li><li><code>input</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/NewsletterForm.wrn</code></p><pre data-language="wrn"><code>component NewsletterForm &#123;
+    props &#123;
+        class: string = &quot;&quot;
+        eyebrow = &quot;&quot;
+        title = &quot;Stay up to date&quot;
+        description = &quot;&quot;
+
+        placeholder = &quot;Enter your email&quot;
+        buttonLabel = &quot;Subscribe&quot;
+
+        action = &quot;/newsletter/subscribe&quot;
+        method = &quot;post&quot;
+        emailName = &quot;email&quot;
+
+        privacyLabel = &quot;&quot;
+        privacyHref = &quot;/privacy&quot;
+
+        successMessage = &quot;You are subscribed.&quot;
+        errorMessage = &quot;Something went wrong. Please try again.&quot;
+
+        iconClass = &quot;icon-[lucide--mail]&quot;
+
+        centered = false
+        compact = false
+        showIcon = true
+        showPrivacy = true
+        fullWidth = false
+    &#125;
+
+    state email = &quot;&quot;
+    state status = &quot;idle&quot;
+    state message = &quot;&quot;
+
+    view &#123;
+        &lt;section
+            aria-labelledby=&quot;newsletter-form-title&quot;
+            class=&quot;w-full px-5 sm:px-8 lg:px-10 xl:px-12 &#123;class&#125;&quot;
+        &gt;
+            &lt;div
+                class=&quot; relative mx-auto w-full overflow-hidden rounded-3xl border border-indigo-200/80 bg-linear-to-br from-indigo-50 via-white to-violet-50 shadow-xl shadow-indigo-950/5 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10 dark:shadow-black/20 &quot;
+                class:max-w-7xl=&quot;fullWidth&quot;
+                class:max-w-3xl=&quot;!fullWidth&quot;
+            &gt;
+                &lt;!-- Background decoration --&gt;
+                &lt;div
+                    aria-hidden=&quot;true&quot;
+                    class=&quot;pointer-events-none absolute inset-0 overflow-hidden&quot;
+                &gt;
+                    &lt;div class=&quot;absolute -right-20 -top-24 h-64 w-64 rounded-full bg-indigo-300/25 blur-3xl dark:bg-indigo-500/10&quot;&gt;&lt;/div&gt;
+
+                    &lt;div class=&quot;absolute -bottom-28 -left-20 h-64 w-64 rounded-full bg-violet-300/20 blur-3xl dark:bg-violet-500/10&quot;&gt;&lt;/div&gt;
+
+                    &lt;div class=&quot;absolute left-1/2 top-0 h-px w-2/3 -translate-x-1/2 bg-linear-to-r from-transparent via-indigo-400/60 to-transparent dark:via-indigo-400/20&quot;&gt;&lt;/div&gt;
+                &lt;/div&gt;
+
+                &lt;div
+                    class=&quot;relative&quot;
+                    class:p-5=&quot;compact&quot;
+                    class:sm:p-6=&quot;compact&quot;
+                    class:p-7=&quot;!compact&quot;
+                    class:sm:p-9=&quot;!compact&quot;
+                    class:lg:p-10=&quot;!compact&quot;
+                &gt;
+                    &lt;div
+                        class=&quot; &#123;compact ? 'flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between lg:gap-10' : centered ? 'mx-auto flex max-w-2xl flex-col items-center gap-7 text-center' : 'grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(360px,480px)] lg:items-center lg:gap-12' &#125; &quot;
+                    &gt;
+                        &lt;!-- Content --&gt;
+                        &lt;div
+                            class=&quot; min-w-0 &#123;compact ? 'max-w-2xl' : ''&#125; &#123;centered &amp;&amp; !compact ? 'w-full max-w-2xl' : ''&#125; &quot;
+                        &gt;
+                            &lt;div class=&quot; flex gap-4 &#123;centered &amp;&amp; !compact ? 'flex-col items-center' : 'items-start' &#125; &quot; &gt;
+                                &lt;!-- Icon --&gt;
+                                &lt;div
+                                    class=&quot;relative shrink-0&quot;
+                                    class:hidden=&quot;!showIcon&quot;
+                                &gt;
+                                    &lt;div aria-hidden=&quot;true&quot; class=&quot;absolute inset-1 rounded-2xl bg-indigo-500/25 blur-xl&quot; &gt;&lt;/div&gt;
+
+                                    &lt;span
+                                        class=&quot; relative grid place-items-center rounded-2xl border border-indigo-200 bg-white/90 text-indigo-600 shadow-lg shadow-indigo-950/10 backdrop-blur-sm dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300 dark:shadow-black/20 &#123;compact ? 'h-11 w-11' : 'h-13 w-13'&#125; &quot;
+                                    &gt;
+                                        &lt;span class=&quot; &#123;iconClass&#125; &#123;compact ? 'h-5 w-5' : 'h-6 w-6'&#125; &quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+                                &lt;/div&gt;
+
+                                &lt;div class=&quot;min-w-0&quot;&gt;
+                                    &lt;!-- Eyebrow --&gt;
+                                    &lt;p
+                                        class=&quot;text-xs font-bold uppercase tracking-[0.18em] text-indigo-600 dark:text-indigo-400&quot;
+                                        class:hidden=&quot;eyebrow === ''&quot;
+                                    &gt;
+                                        &#123;eyebrow&#125;
+                                    &lt;/p&gt;
+
+                                    &lt;!-- Title --&gt;
+                                    &lt;h2
+                                        id=&quot;newsletter-form-title&quot;
+                                        class=&quot; font-bold leading-tight tracking-tight text-slate-950 dark:text-white &#123;eyebrow !== '' ? 'mt-2' : ''&#125; &#123;compact ? 'text-xl sm:text-2xl' : 'text-2xl sm:text-3xl' &#125; &quot;
+                                    &gt;
+                                        &#123;title&#125;
+                                    &lt;/h2&gt;
+                                &lt;/div&gt;
+                            &lt;/div&gt;
+
+                            &lt;!-- Description --&gt;
+                            &lt;p
+                                class=&quot; mt-4 text-sm leading-6 text-slate-600 dark:text-slate-400 &#123;!compact ? 'sm:text-base sm:leading-7' : ''&#125; &#123;centered &amp;&amp; !compact ? 'mx-auto max-w-xl' : 'max-w-2xl' &#125; &quot;
+                                class:hidden=&quot;description === ''&quot;
+                            &gt;
+                                &#123;description&#125;
+                            &lt;/p&gt;
+                        &lt;/div&gt;
+
+                        &lt;!-- Form --&gt;
+                        &lt;div class=&quot; w-full &#123;compact ? 'lg:max-w-xl' : ''&#125; &#123;centered &amp;&amp; !compact ? 'max-w-2xl' : ''&#125; &quot; &gt;
+                            &lt;form
+                                action=&quot;&#123;action&#125;&quot;
+                                method=&quot;&#123;method&#125;&quot;
+                                class=&quot;w-full&quot;
+                                @submit=&quot; status = 'loading'; message = ''; &quot;
+                            &gt;
+                                &lt;label
+                                    for=&quot;newsletter-email&quot;
+                                    class=&quot;sr-only&quot;
+                                &gt;
+                                    Email address
+                                &lt;/label&gt;
+
+                                &lt;div
+                                    class=&quot; flex w-full flex-col gap-2 rounded-2xl border border-slate-200 bg-white/85 p-2 shadow-sm backdrop-blur-sm dark:border-white/10 dark:bg-white/5 sm:flex-row &quot;
+                                &gt;
+                                    &lt;div class=&quot;relative min-w-0 flex-1&quot;&gt;
+                                        &lt;span class=&quot;pointer-events-none absolute left-3.5 top-1/2 h-4.5 w-4.5 -translate-y-1/2 text-slate-400 icon-[lucide--mail] dark:text-slate-500&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                        &lt;input
+                                            id=&quot;newsletter-email&quot;
+                                            type=&quot;email&quot;
+                                            name=&quot;&#123;emailName&#125;&quot;
+                                            value=&quot;&#123;email&#125;&quot;
+                                            placeholder=&quot;&#123;placeholder&#125;&quot;
+                                            autocomplete=&quot;email&quot;
+                                            required
+                                            @input=&quot;email = event.target.value&quot;
+                                            class=&quot; w-full rounded-xl bg-transparent pl-10 pr-3 text-sm text-slate-950 outline-none placeholder:text-slate-400 focus:bg-white dark:text-white dark:placeholder:text-slate-500 dark:focus:bg-white/5 &#123;compact ? 'h-10' : 'h-11'&#125; &quot;
+                                        /&gt;
+                                    &lt;/div&gt;
+
+                                    &lt;button
+                                        type=&quot;submit&quot;
+                                        class=&quot; group inline-flex shrink-0 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 disabled:cursor-wait disabled:opacity-70 dark:focus-visible:ring-offset-slate-900 &#123;compact ? 'h-10' : 'h-11'&#125; &quot;
+                                        disabled=&quot;&#123;status === 'loading'&#125;&quot;
+                                    &gt;
+                                        &lt;span class=&quot;icon-[lucide--loader-circle] h-4 w-4 animate-spin&quot; aria-hidden=&quot;true&quot; class:hidden=&quot;status !== 'loading'&quot; &gt;&lt;/span&gt;
+
+                                        &lt;span class:hidden=&quot;status === 'loading'&quot;&gt;
+                                            &#123;buttonLabel&#125;
+                                        &lt;/span&gt;
+
+                                        &lt;span class:hidden=&quot;status !== 'loading'&quot;&gt;
+                                            Subscribing
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1&quot; aria-hidden=&quot;true&quot; class:hidden=&quot;status === 'loading'&quot; &gt;&lt;/span&gt;
+                                    &lt;/button&gt;
+                                &lt;/div&gt;
+                            &lt;/form&gt;
+
+                            &lt;p
+                                class=&quot;mt-3 text-xs leading-5 text-slate-500 dark:text-slate-400&quot;
+                                class:hidden=&quot;!showPrivacy&quot;
+                                class:text-center=&quot;centered &amp;&amp; !compact&quot;
+                            &gt;
+                                No spam. Unsubscribe at any time.
+
+                                &lt;a
+                                    href=&quot;&#123;privacyHref&#125;&quot;
+                                    class=&quot;font-semibold text-indigo-600 transition hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300&quot;
+                                    class:hidden=&quot;privacyLabel === ''&quot;
+                                &gt;
+                                    &#123;privacyLabel&#125;
+                                &lt;/a&gt;
+                            &lt;/p&gt;
+
+                            &lt;div
+                                role=&quot;status&quot;
+                                aria-live=&quot;polite&quot;
+                                class=&quot;mt-3 rounded-xl px-3 py-2.5 text-sm font-medium&quot;
+                                class:hidden=&quot;message === ''&quot;
+                                class:bg-emerald-50=&quot;status === 'success'&quot;
+                                class:text-emerald-700=&quot;status === 'success'&quot;
+                                class:ring-1=&quot;status === 'success'&quot;
+                                class:ring-inset=&quot;status === 'success'&quot;
+                                class:ring-emerald-200=&quot;status === 'success'&quot;
+                                class:dark:bg-emerald-500/10=&quot;status === 'success'&quot;
+                                class:dark:text-emerald-300=&quot;status === 'success'&quot;
+                                class:dark:ring-emerald-500/20=&quot;status === 'success'&quot;
+                                class:bg-rose-50=&quot;status === 'error'&quot;
+                                class:text-rose-700=&quot;status === 'error'&quot;
+                                class:ring-1=&quot;status === 'error'&quot;
+                                class:ring-inset=&quot;status === 'error'&quot;
+                                class:ring-rose-200=&quot;status === 'error'&quot;
+                                class:dark:bg-rose-500/10=&quot;status === 'error'&quot;
+                                class:dark:text-rose-300=&quot;status === 'error'&quot;
+                                class:dark:ring-rose-500/20=&quot;status === 'error'&quot;
+                            &gt;
+                                &#123;message&#125;
+                            &lt;/div&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/section&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/no-results-state.wrn b/app/pages/components/no-results-state.wrn
new file mode 100644
index 00000000..418a6781
--- /dev/null
+++ b/app/pages/components/no-results-state.wrn
@@ -0,0 +1,32 @@
+page NoResultsStatecomponent {
+  seo {
+    title = "NoResultsState component"
+    description = "Reusable no results state component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">NoResultsState</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>NoResultsState</h1><p>Reusable no results state component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;NoResultsState label=&quot;NoResults&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;NoResultsState&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;NoResults&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/NoResultsState.wrn</code></p><pre data-language="wrn"><code>component NoResultsState &#123;
+  props &#123;
+    label = &quot;NoResults&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/not-found-page.wrn b/app/pages/components/not-found-page.wrn
new file mode 100644
index 00000000..70568d8b
--- /dev/null
+++ b/app/pages/components/not-found-page.wrn
@@ -0,0 +1,34 @@
+page NotFoundPagecomponent {
+  seo {
+    title = "NotFoundPage component"
+    description = "Reusable not found page component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">NotFoundPage</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>NotFoundPage</h1><p>Reusable not found page component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;NotFoundPage eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;NotFoundPage&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/NotFoundPage.wrn</code></p><pre data-language="wrn"><code>component NotFoundPage &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/not-found-state.wrn b/app/pages/components/not-found-state.wrn
new file mode 100644
index 00000000..387b7c83
--- /dev/null
+++ b/app/pages/components/not-found-state.wrn
@@ -0,0 +1,32 @@
+page NotFoundStatecomponent {
+  seo {
+    title = "NotFoundState component"
+    description = "Reusable not found state component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">NotFoundState</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>NotFoundState</h1><p>Reusable not found state component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;NotFoundState label=&quot;NotFound&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;NotFoundState&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;NotFound&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/NotFoundState.wrn</code></p><pre data-language="wrn"><code>component NotFoundState &#123;
+  props &#123;
+    label = &quot;NotFound&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/notification-card.wrn b/app/pages/components/notification-card.wrn
new file mode 100644
index 00000000..0c6c253d
--- /dev/null
+++ b/app/pages/components/notification-card.wrn
@@ -0,0 +1,30 @@
+page NotificationCardcomponent {
+  seo {
+    title = "NotificationCard component"
+    description = "Reusable notification card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">NotificationCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>NotificationCard</h1><p>Reusable notification card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;NotificationCard title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;NotificationCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/NotificationCard.wrn</code></p><pre data-language="wrn"><code>component NotificationCard &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card wire-catalog-card--notification &#123;class&#125;&quot;&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-catalog-card__link&quot;&gt;&lt;span class=&quot;wire-visually-hidden&quot;&gt;Open &#123;title&#125;&lt;/span&gt;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/notification-dot.wrn b/app/pages/components/notification-dot.wrn
new file mode 100644
index 00000000..72f24798
--- /dev/null
+++ b/app/pages/components/notification-dot.wrn
@@ -0,0 +1,29 @@
+page NotificationDotcomponent {
+  seo {
+    title = "NotificationDot component"
+    description = "Reusable notification dot component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">NotificationDot</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>NotificationDot</h1><p>Reusable notification dot component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;NotificationDot label=&quot;Notification&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;NotificationDot&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Notification&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/NotificationDot.wrn</code></p><pre data-language="wrn"><code>component NotificationDot &#123;
+  props &#123;
+    label = &quot;Notification&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-badge wire-badge--&#123;variant&#125; wire-catalog-badge wire-catalog-badge--notificationdot &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/notification-list.wrn b/app/pages/components/notification-list.wrn
new file mode 100644
index 00000000..27e65265
--- /dev/null
+++ b/app/pages/components/notification-list.wrn
@@ -0,0 +1,31 @@
+page NotificationListcomponent {
+  seo {
+    title = "NotificationList component"
+    description = "Reusable notification list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">NotificationList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>NotificationList</h1><p>Reusable notification list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;NotificationList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;NotificationList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/NotificationList.wrn</code></p><pre data-language="wrn"><code>component NotificationList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/number-input.wrn b/app/pages/components/number-input.wrn
new file mode 100644
index 00000000..5cb993cd
--- /dev/null
+++ b/app/pages/components/number-input.wrn
@@ -0,0 +1,45 @@
+page NumberInputcomponent {
+  seo {
+    title = "NumberInput component"
+    description = "Reusable number input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">NumberInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>NumberInput</h1><p>Reusable number input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>12 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;NumberInput id=&quot;id&quot; name=&quot;name&quot; label=&quot;Number&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;NumberInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Number&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>autocomplete</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/NumberInput.wrn</code></p><pre data-language="wrn"><code>component NumberInput &#123;
+  props &#123;
+    class = &quot;&quot;
+    id = &quot;&quot;
+    name = &quot;&quot;
+    label = &quot;Number&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    help = &quot;&quot;
+    error = &quot;&quot;
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;space-y-2 &#123;class&#125;&quot;&gt;
+      &lt;label for=&quot;&#123;id&#125;&quot; class=&quot;block text-sm font-semibold text-slate-800 dark:text-slate-200&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;ml-1 text-red-500&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
+      &lt;input id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; type=&quot;number&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; autocomplete=&quot;&#123;autocomplete&#125;&quot; aria-invalid=&quot;&#123;!!error&#125;&quot; aria-describedby=&quot;&#123;id&#125;-help &#123;id&#125;-error&quot; class=&quot;min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white &#123;error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'&#125;&quot; /&gt;
+      &lt;p id=&quot;&#123;id&#125;-help&quot; data-show=&quot;help &amp;&amp; !error&quot; class=&quot;text-sm text-slate-500 dark:text-slate-400&quot;&gt;&#123;help&#125;&lt;/p&gt;
+      &lt;p id=&quot;&#123;id&#125;-error&quot; data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;text-sm font-medium text-red-600 dark:text-red-400&quot;&gt;&#123;error&#125;&lt;/p&gt;
+    &lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/office-card.wrn b/app/pages/components/office-card.wrn
new file mode 100644
index 00000000..8231800c
--- /dev/null
+++ b/app/pages/components/office-card.wrn
@@ -0,0 +1,34 @@
+page OfficeCardcomponent {
+  seo {
+    title = "OfficeCard component"
+    description = "Reusable office card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">OfficeCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>OfficeCard</h1><p>Reusable office card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;OfficeCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;OfficeCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/OfficeCard.wrn</code></p><pre data-language="wrn"><code>component OfficeCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/offline-page.wrn b/app/pages/components/offline-page.wrn
new file mode 100644
index 00000000..3a302e43
--- /dev/null
+++ b/app/pages/components/offline-page.wrn
@@ -0,0 +1,34 @@
+page OfflinePagecomponent {
+  seo {
+    title = "OfflinePage component"
+    description = "Reusable offline page component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">OfflinePage</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>OfflinePage</h1><p>Reusable offline page component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;OfflinePage eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;OfflinePage&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/OfflinePage.wrn</code></p><pre data-language="wrn"><code>component OfflinePage &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/offline-state.wrn b/app/pages/components/offline-state.wrn
new file mode 100644
index 00000000..48aad5b4
--- /dev/null
+++ b/app/pages/components/offline-state.wrn
@@ -0,0 +1,32 @@
+page OfflineStatecomponent {
+  seo {
+    title = "OfflineState component"
+    description = "Reusable offline state component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">OfflineState</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>OfflineState</h1><p>Reusable offline state component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;OfflineState label=&quot;Offline&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;OfflineState&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Offline&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/OfflineState.wrn</code></p><pre data-language="wrn"><code>component OfflineState &#123;
+  props &#123;
+    label = &quot;Offline&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/onboarding-progress.wrn b/app/pages/components/onboarding-progress.wrn
new file mode 100644
index 00000000..537d69a3
--- /dev/null
+++ b/app/pages/components/onboarding-progress.wrn
@@ -0,0 +1,32 @@
+page OnboardingProgresscomponent {
+  seo {
+    title = "OnboardingProgress component"
+    description = "Reusable onboarding progress component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">OnboardingProgress</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>OnboardingProgress</h1><p>Reusable onboarding progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;OnboardingProgress title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;OnboardingProgress&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/OnboardingProgress.wrn</code></p><pre data-language="wrn"><code>component OnboardingProgress &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/one-time-secret-display.wrn b/app/pages/components/one-time-secret-display.wrn
new file mode 100644
index 00000000..9235f968
--- /dev/null
+++ b/app/pages/components/one-time-secret-display.wrn
@@ -0,0 +1,34 @@
+page OneTimeSecretDisplaycomponent {
+  seo {
+    title = "OneTimeSecretDisplay component"
+    description = "Reusable one time secret display component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">OneTimeSecretDisplay</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>OneTimeSecretDisplay</h1><p>Reusable one time secret display component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;OneTimeSecretDisplay eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;OneTimeSecretDisplay&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/OneTimeSecretDisplay.wrn</code></p><pre data-language="wrn"><code>component OneTimeSecretDisplay &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/online-indicator.wrn b/app/pages/components/online-indicator.wrn
new file mode 100644
index 00000000..75529f3a
--- /dev/null
+++ b/app/pages/components/online-indicator.wrn
@@ -0,0 +1,29 @@
+page OnlineIndicatorcomponent {
+  seo {
+    title = "OnlineIndicator component"
+    description = "Reusable online indicator component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">OnlineIndicator</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>OnlineIndicator</h1><p>Reusable online indicator component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;OnlineIndicator label=&quot;Online&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;OnlineIndicator&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Online&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/OnlineIndicator.wrn</code></p><pre data-language="wrn"><code>component OnlineIndicator &#123;
+  props &#123;
+    label = &quot;Online&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-badge wire-badge--&#123;variant&#125; wire-catalog-badge wire-catalog-badge--onlineindicator &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/opacity-slider.wrn b/app/pages/components/opacity-slider.wrn
new file mode 100644
index 00000000..fd7dd812
--- /dev/null
+++ b/app/pages/components/opacity-slider.wrn
@@ -0,0 +1,34 @@
+page OpacitySlidercomponent {
+  seo {
+    title = "OpacitySlider component"
+    description = "Reusable opacity slider component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">OpacitySlider</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>OpacitySlider</h1><p>Reusable opacity slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;OpacitySlider eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;OpacitySlider&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/OpacitySlider.wrn</code></p><pre data-language="wrn"><code>component OpacitySlider &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/open-apicta.wrn b/app/pages/components/open-apicta.wrn
new file mode 100644
index 00000000..ad3a4cc0
--- /dev/null
+++ b/app/pages/components/open-apicta.wrn
@@ -0,0 +1,32 @@
+page OpenAPICTAcomponent {
+  seo {
+    title = "OpenAPICTA component"
+    description = "Reusable open a p i c t a component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">OpenAPICTA</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>OpenAPICTA</h1><p>Reusable open a p i c t a component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;OpenAPICTA label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;OpenAPICTA&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/OpenAPICTA.wrn</code></p><pre data-language="wrn"><code>component OpenAPICTA &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/optional-indicator.wrn b/app/pages/components/optional-indicator.wrn
new file mode 100644
index 00000000..b87ed81b
--- /dev/null
+++ b/app/pages/components/optional-indicator.wrn
@@ -0,0 +1,32 @@
+page OptionalIndicatorcomponent {
+  seo {
+    title = "OptionalIndicator component"
+    description = "Reusable optional indicator component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">OptionalIndicator</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>OptionalIndicator</h1><p>Reusable optional indicator component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;OptionalIndicator label=&quot;Optional&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;OptionalIndicator&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Optional&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/OptionalIndicator.wrn</code></p><pre data-language="wrn"><code>component OptionalIndicator &#123;
+  props &#123;
+    label = &quot;Optional&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/organization-selector.wrn b/app/pages/components/organization-selector.wrn
new file mode 100644
index 00000000..c26eab93
--- /dev/null
+++ b/app/pages/components/organization-selector.wrn
@@ -0,0 +1,37 @@
+page OrganizationSelectorcomponent {
+  seo {
+    title = "OrganizationSelector component"
+    description = "Reusable organization selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">OrganizationSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>OrganizationSelector</h1><p>Reusable organization selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;OrganizationSelector label=&quot;Organization&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;OrganizationSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Organization&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/OrganizationSelector.wrn</code></p><pre data-language="wrn"><code>component OrganizationSelector &#123;
+  props &#123;
+    label = &quot;Organization&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/otp-input.wrn b/app/pages/components/otp-input.wrn
new file mode 100644
index 00000000..00b648b2
--- /dev/null
+++ b/app/pages/components/otp-input.wrn
@@ -0,0 +1,32 @@
+page OtpInputcomponent {
+  seo {
+    title = "OtpInput component"
+    description = "Reusable otp input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">OtpInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>OtpInput</h1><p>Reusable otp input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;OtpInput name=&quot;otp&quot; length=&quot;6&quot; label=&quot;Verification code&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;OtpInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;otp&quot;</code></td></tr><tr><td><code>length</code></td><td><code>number</code></td><td>Optional</td><td><code>6</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Verification code&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/OtpInput.wrn</code></p><pre data-language="wrn"><code>component OtpInput &#123;
+  props &#123;
+    class = &quot;&quot;
+    name = &quot;otp&quot;
+    length = 6
+    label = &quot;Verification code&quot;
+  &#125;
+  view &#123;
+    &lt;fieldset class=&quot;&#123;class&#125;&quot;&gt;&lt;legend class=&quot;mb-3 text-sm font-semibold&quot;&gt;&#123;label&#125;&lt;/legend&gt;&lt;input name=&quot;&#123;name&#125;&quot; inputmode=&quot;numeric&quot; autocomplete=&quot;one-time-code&quot; maxlength=&quot;&#123;length&#125;&quot; pattern=&quot;[0-9]*&quot; class=&quot;min-h-14 w-full rounded-2xl border border-slate-300 bg-white px-4 text-center font-mono text-2xl tracking-[0.5em] outline-none transition focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 dark:border-slate-700 dark:bg-slate-950&quot; /&gt;&lt;/fieldset&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/otp-verification-form.wrn b/app/pages/components/otp-verification-form.wrn
new file mode 100644
index 00000000..3e7063c3
--- /dev/null
+++ b/app/pages/components/otp-verification-form.wrn
@@ -0,0 +1,34 @@
+page OtpVerificationFormcomponent {
+  seo {
+    title = "OtpVerificationForm component"
+    description = "Reusable otp verification form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">OtpVerificationForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>OtpVerificationForm</h1><p>Reusable otp verification form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;OtpVerificationForm eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;OtpVerificationForm&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/OtpVerificationForm.wrn</code></p><pre data-language="wrn"><code>component OtpVerificationForm &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/outlined-card.wrn b/app/pages/components/outlined-card.wrn
new file mode 100644
index 00000000..fd6f8822
--- /dev/null
+++ b/app/pages/components/outlined-card.wrn
@@ -0,0 +1,30 @@
+page OutlinedCardcomponent {
+  seo {
+    title = "OutlinedCard component"
+    description = "Reusable outlined card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">OutlinedCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>OutlinedCard</h1><p>Reusable outlined card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;OutlinedCard title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;OutlinedCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/OutlinedCard.wrn</code></p><pre data-language="wrn"><code>component OutlinedCard &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card wire-catalog-card--outlined &#123;class&#125;&quot;&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-catalog-card__link&quot;&gt;&lt;span class=&quot;wire-visually-hidden&quot;&gt;Open &#123;title&#125;&lt;/span&gt;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/page-alert.wrn b/app/pages/components/page-alert.wrn
new file mode 100644
index 00000000..25aecc87
--- /dev/null
+++ b/app/pages/components/page-alert.wrn
@@ -0,0 +1,32 @@
+page PageAlertcomponent {
+  seo {
+    title = "PageAlert component"
+    description = "Reusable page alert component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PageAlert</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>PageAlert</h1><p>Reusable page alert component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PageAlert label=&quot;Page&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PageAlert&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Page&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PageAlert.wrn</code></p><pre data-language="wrn"><code>component PageAlert &#123;
+  props &#123;
+    label = &quot;Page&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/page-header.wrn b/app/pages/components/page-header.wrn
new file mode 100644
index 00000000..3b610995
--- /dev/null
+++ b/app/pages/components/page-header.wrn
@@ -0,0 +1,193 @@
+page PageHeadercomponent {
+  seo {
+    title = "PageHeader component"
+    description = "Reusable page header component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PageHeader</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>PageHeader</h1><p>Reusable page header component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>16 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PageHeader eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; primaryLabel=&quot;primaryLabel&quot; primaryHref=&quot;primaryHref&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PageHeader&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>primaryLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>primaryHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>secondaryLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>secondaryHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;sparkles&quot;</code></td></tr><tr><td><code>centered</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>compact</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>showBreadcrumbs</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>breadcrumbParent</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>breadcrumbParentHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>breadcrumbCurrent</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>highlights</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PageHeader.wrn</code></p><pre data-language="wrn"><code>component PageHeader &#123;
+    props &#123;
+        class: string = &quot;&quot;
+        eyebrow = &quot;&quot;
+        title = &quot;&quot;
+        description = &quot;&quot;
+
+        primaryLabel = &quot;&quot;
+        primaryHref = &quot;&quot;
+
+        secondaryLabel = &quot;&quot;
+        secondaryHref = &quot;&quot;
+
+        icon = &quot;sparkles&quot;
+
+        centered = false
+        compact = false
+
+        showBreadcrumbs = false
+        breadcrumbParent = &quot;&quot;
+        breadcrumbParentHref = &quot;&quot;
+        breadcrumbCurrent = &quot;&quot;
+
+        highlights = []
+    &#125;
+
+    view &#123;
+        &lt;section
+            aria-labelledby=&quot;public-page-title&quot;
+            class=&quot;relative overflow-hidden border-b border-slate-200 bg-white dark:border-white/10 dark:bg-slate-950 &#123;class&#125;&quot;
+        &gt;
+            &lt;!-- Background decoration --&gt;
+            &lt;div
+                aria-hidden=&quot;true&quot;
+                class=&quot;pointer-events-none absolute inset-0 overflow-hidden&quot;
+            &gt;
+                &lt;div class=&quot;absolute -right-40 -top-48 h-96 w-96 rounded-full bg-indigo-300/20 blur-3xl dark:bg-indigo-500/10&quot; &gt;&lt;/div&gt;
+
+                &lt;div class=&quot;absolute -left-40 top-20 h-80 w-80 rounded-full bg-violet-300/15 blur-3xl dark:bg-violet-500/5&quot; &gt;&lt;/div&gt;
+
+                &lt;div class=&quot;absolute left-1/2 top-0 h-px w-2/3 -translate-x-1/2 bg-linear-to-r from-transparent via-indigo-300/60 to-transparent dark:via-indigo-500/20&quot; &gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div class=&quot;relative w-full px-5 sm:px-8 lg:px-10 xl:px-12&quot;&gt;
+
+                &lt;!-- Breadcrumbs --&gt;
+                &lt;div
+                    class=&quot;border-b border-slate-200/80 py-3 dark:border-white/10&quot;
+                    class:hidden=&quot;!showBreadcrumbs&quot;
+                &gt;
+                    &lt;Breadcrumbs
+                        centered=&quot;&#123;centered&#125;&quot;
+                        compact=&quot;&#123;false&#125;&quot;
+                        items=&quot;&#123;[ ...(breadcrumbParent !== '' ? [&#123; label: breadcrumbParent, href: breadcrumbParentHref, current: false &#125;] : []), ...(breadcrumbCurrent !== '' ? [&#123; label: breadcrumbCurrent, href: '', current: true &#125;] : []) ]&#125;&quot;
+                    /&gt;
+                &lt;/div&gt;
+
+                &lt;!-- Header body --&gt;
+                &lt;div
+                    class=&quot; &#123;compact ? 'py-9 sm:py-10 lg:py-12' : 'py-12 sm:py-14 lg:py-16' &#125;  &#123;centered ? 'mx-auto flex max-w-5xl flex-col items-center text-center' : 'grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-start lg:gap-12' &#125; &quot;
+                &gt;
+                    &lt;!-- Content --&gt;
+                    &lt;div class=&quot; min-w-0 &#123;centered ? 'w-full max-w-4xl' : 'max-w-4xl'&#125; &quot; &gt;
+                        &lt;!-- Eyebrow --&gt;
+                        &lt;div
+                            class=&quot;flex&quot;
+                            class:hidden=&quot;eyebrow === ''&quot;
+                            class:justify-center=&quot;centered&quot;
+                            class:justify-start=&quot;!centered&quot;
+                        &gt;
+                            &lt;span
+                                class=&quot;inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-indigo-50 px-3 py-1.5 text-xs font-semibold text-indigo-700 shadow-sm dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300&quot;
+                            &gt;
+                                &lt;span class=&quot;grid h-5 w-5 place-items-center rounded-full bg-indigo-100 dark:bg-indigo-500/15&quot; &gt;
+                                    &lt;span class=&quot;icon-[lucide--&#123;icon&#125;] h-3 w-3&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &#123;eyebrow&#125;
+                            &lt;/span&gt;
+                        &lt;/div&gt;
+
+                        &lt;!-- Title --&gt;
+                        &lt;h1
+                            id=&quot;public-page-title&quot;
+                            class=&quot; font-bold tracking-tight text-slate-950 dark:text-white &#123;eyebrow !== '' ? 'mt-6' : ''&#125; &#123;compact ? 'text-3xl leading-tight sm:text-4xl lg:text-5xl' : 'text-4xl leading-[1.08] sm:text-5xl lg:text-[3.25rem]' &#125; &quot;
+                        &gt;
+                            &#123;title&#125;
+                        &lt;/h1&gt;
+
+                        &lt;!-- Description --&gt;
+                        &lt;p
+                            class=&quot; mt-5 text-base text-slate-600 dark:text-slate-400 &#123;compact ? 'leading-7' : 'leading-8 sm:text-lg'&#125; &#123;centered ? 'mx-auto max-w-3xl' : 'max-w-2xl'&#125; &quot;
+                            class:hidden=&quot;description === ''&quot;
+                        &gt;
+                            &#123;description&#125;
+                        &lt;/p&gt;
+                    &lt;/div&gt;
+
+                    &lt;!-- Single dynamic action group --&gt;
+                    &lt;div
+                        class=&quot; flex flex-col gap-3 sm:flex-row &#123;centered ? 'mt-8 justify-center' : 'lg:pt-1' &#125; &quot;
+                        class:hidden=&quot;primaryLabel === '' &amp;&amp; secondaryLabel === ''&quot;
+                    &gt;
+                        &lt;!-- Secondary action --&gt;
+                        &lt;a
+                            href=&quot;&#123;secondaryHref&#125;&quot;
+                            class=&quot;h-12 items-center justify-center rounded-xl border border-slate-200 bg-white px-5 text-sm font-semibold text-slate-700 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-slate-50 hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500/30 dark:hover:bg-white/10 dark:hover:text-indigo-300&quot;
+                            class:hidden=&quot;secondaryLabel === ''&quot;
+                            class:inline-flex=&quot;secondaryLabel !== ''&quot;
+                        &gt;
+                            &#123;secondaryLabel&#125;
+                        &lt;/a&gt;
+
+                        &lt;!-- Primary action --&gt;
+                        &lt;a
+                            href=&quot;&#123;primaryHref&#125;&quot;
+                            class=&quot;group h-12 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950&quot;
+                            class:hidden=&quot;primaryLabel === ''&quot;
+                            class:inline-flex=&quot;primaryLabel !== ''&quot;
+                        &gt;
+                            &#123;primaryLabel&#125;
+
+                            &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                        &lt;/a&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+
+                &lt;!-- Dynamic highlight strip --&gt;
+                &lt;div
+                    class=&quot;border-t border-slate-200 py-5 dark:border-white/10&quot;
+                    class:hidden=&quot;compact || highlights.length === 0&quot;
+                    class:block=&quot;!compact &amp;&amp; highlights.length &gt; 0&quot;
+                &gt;
+                    &lt;div class=&quot;flex gap-y-5&quot;&gt;
+                        &#123;#each highlights as highlight&#125;
+                        &lt;div
+                            class=&quot;w-full min-w-0 pr-6&quot;
+                            class:w-full=&quot;highlights.length === 1&quot;
+                            class:sm:w-1/2=&quot;highlights.length &gt;= 2&quot;
+                            class:lg:w-1/2=&quot;highlights.length === 2&quot;
+                            class:lg:w-1/3=&quot;highlights.length === 3&quot;
+                            class:lg:w-1/4=&quot;highlights.length &gt;= 4&quot;
+                        &gt;
+                            &lt;div
+                                class=&quot;flex min-w-0 items-center gap-3&quot;
+                                class:justify-center=&quot;centered&quot;
+                            &gt;
+                                &lt;span class=&quot;grid h-10 w-10 shrink-0 place-items-center rounded-xl &#123;highlight.iconBoxClass&#125;&quot; &gt;
+                                    &lt;span class=&quot;&#123;highlight.iconClass&#125; h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;div class=&quot;min-w-0&quot;&gt;
+                                    &lt;p class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                        &#123;highlight.title&#125;
+                                    &lt;/p&gt;
+
+                                    &lt;p
+                                        class=&quot;mt-0.5 text-xs leading-5 text-slate-500 dark:text-slate-400&quot;
+                                        class:hidden=&quot;highlight.description === ''&quot;
+                                    &gt;
+                                        &#123;highlight.description&#125;
+                                    &lt;/p&gt;
+                                &lt;/div&gt;
+                            &lt;/div&gt;
+                        &lt;/div&gt;
+                        &#123;/each&#125;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/section&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/page-heading.wrn b/app/pages/components/page-heading.wrn
new file mode 100644
index 00000000..a118753b
--- /dev/null
+++ b/app/pages/components/page-heading.wrn
@@ -0,0 +1,29 @@
+page PageHeadingcomponent {
+  seo {
+    title = "PageHeading component"
+    description = "Reusable page heading component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PageHeading</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>PageHeading</h1><p>Reusable page heading component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PageHeading text=&quot;text&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PageHeading&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>text</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PageHeading.wrn</code></p><pre data-language="wrn"><code>component PageHeading &#123;
+  props &#123;
+    text = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-type wire-type--heading wire-text--&#123;align&#125;  &#123;class&#125;&quot;&gt;&#123;text&#125;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/page-shell.wrn b/app/pages/components/page-shell.wrn
new file mode 100644
index 00000000..3090ce78
--- /dev/null
+++ b/app/pages/components/page-shell.wrn
@@ -0,0 +1,29 @@
+page PageShellcomponent {
+  seo {
+    title = "PageShell component"
+    description = "Reusable page shell component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PageShell</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>PageShell</h1><p>Reusable page shell component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PageShell /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PageShell&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>className</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PageShell.wrn</code></p><pre data-language="wrn"><code>component PageShell &#123;
+  props &#123;
+    className = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;min-h-screen bg-white text-slate-950 antialiased selection:bg-violet-200 dark:bg-slate-950 dark:text-white dark:selection:bg-violet-800 &#123;className&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/page-skeleton.wrn b/app/pages/components/page-skeleton.wrn
new file mode 100644
index 00000000..6560b4f1
--- /dev/null
+++ b/app/pages/components/page-skeleton.wrn
@@ -0,0 +1,32 @@
+page PageSkeletoncomponent {
+  seo {
+    title = "PageSkeleton component"
+    description = "Reusable page skeleton component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PageSkeleton</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>PageSkeleton</h1><p>Reusable page skeleton component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PageSkeleton label=&quot;Page&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PageSkeleton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Page&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PageSkeleton.wrn</code></p><pre data-language="wrn"><code>component PageSkeleton &#123;
+  props &#123;
+    label = &quot;Page&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/pagination.wrn b/app/pages/components/pagination.wrn
new file mode 100644
index 00000000..f1cc4f88
--- /dev/null
+++ b/app/pages/components/pagination.wrn
@@ -0,0 +1,208 @@
+page Paginationcomponent {
+  seo {
+    title = "Pagination component"
+    description = "Reusable pagination component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Pagination</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Pagination</h1><p>Reusable pagination component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>12 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Pagination currentPage=&quot;1&quot; totalPages=&quot;1&quot; previousHref=&quot;previousHref&quot; nextHref=&quot;nextHref&quot; pages=&quot;[]&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Pagination&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>currentPage</code></td><td><code>number</code></td><td>Optional</td><td><code>1</code></td></tr><tr><td><code>totalPages</code></td><td><code>number</code></td><td>Optional</td><td><code>1</code></td></tr><tr><td><code>previousHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>nextHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>pages</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>showNumbers</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>showSummary</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>totalItems</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>pageSize</code></td><td><code>number</code></td><td>Optional</td><td><code>10</code></td></tr><tr><td><code>compact</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>centered</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Pagination.wrn</code></p><pre data-language="wrn"><code>component Pagination &#123;
+    props &#123;
+        class: string = &quot;&quot;
+        currentPage = 1
+        totalPages = 1
+
+        previousHref = &quot;&quot;
+        nextHref = &quot;&quot;
+
+        pages = []
+
+        showNumbers = true
+        showSummary = true
+
+        totalItems = 0
+        pageSize = 10
+
+        compact = false
+        centered = false
+    &#125;
+
+    view &#123;
+        &lt;nav
+            aria-label=&quot;Pagination&quot;
+            class=&quot;w-full &#123;class&#125;&quot;
+            class:hidden=&quot;totalPages &lt;= 1&quot;
+        &gt;
+            &lt;!-- Result summary --&gt;
+            &lt;div
+                class=&quot;mb-4 text-sm text-slate-500 dark:text-slate-400&quot;
+                class:hidden=&quot;!showSummary || totalItems &lt;= 0&quot;
+                class:text-center=&quot;centered&quot;
+            &gt;
+                Showing
+
+                &lt;span class=&quot;font-semibold text-slate-950 dark:text-white&quot;&gt;
+                    &#123;(currentPage - 1) * pageSize + 1&#125;
+                &lt;/span&gt;
+
+                to
+
+                &lt;span class=&quot;font-semibold text-slate-950 dark:text-white&quot;&gt;
+                    &#123;currentPage * pageSize &gt; totalItems ? totalItems : currentPage * pageSize&#125;
+                &lt;/span&gt;
+
+                of
+
+                &lt;span class=&quot;font-semibold text-slate-950 dark:text-white&quot;&gt;
+                    &#123;totalItems&#125;
+                &lt;/span&gt;
+
+                results
+            &lt;/div&gt;
+
+            &lt;div
+                class=&quot;flex flex-col gap-4 sm:flex-row sm:items-center&quot;
+                class:sm:justify-center=&quot;centered&quot;
+                class:sm:justify-between=&quot;!centered&quot;
+            &gt;
+                &lt;!-- Previous --&gt;
+                &lt;a
+                    href=&quot;&#123;previousHref&#125;&quot;
+                    aria-label=&quot;Go to previous page&quot;
+                    class=&quot;group h-11 items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-slate-50 hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500/30 dark:hover:bg-white/10 dark:hover:text-indigo-300&quot;
+                    class:hidden=&quot;previousHref === ''&quot;
+                    class:inline-flex=&quot;previousHref !== ''&quot;
+                &gt;
+                    &lt;span class=&quot;icon-[lucide--arrow-left] h-4 w-4 transition-transform group-hover:-translate-x-0.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                    &lt;span class:hidden=&quot;compact&quot;&gt;
+                        Previous
+                    &lt;/span&gt;
+                &lt;/a&gt;
+
+                &lt;span
+                    aria-disabled=&quot;true&quot;
+                    class=&quot;h-11 cursor-not-allowed items-center justify-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-4 text-sm font-semibold text-slate-400 dark:border-white/10 dark:bg-white/[0.03] dark:text-slate-600&quot;
+                    class:hidden=&quot;previousHref !== ''&quot;
+                    class:inline-flex=&quot;previousHref === ''&quot;
+                &gt;
+                    &lt;span class=&quot;icon-[lucide--arrow-left] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                    &lt;span class:hidden=&quot;compact&quot;&gt;
+                        Previous
+                    &lt;/span&gt;
+                &lt;/span&gt;
+
+                &lt;!-- Numbered pages --&gt;
+                &lt;div
+                    class=&quot;flex flex-wrap items-center justify-center gap-1.5&quot;
+                    class:hidden=&quot;!showNumbers&quot;
+                &gt;
+                    &#123;#each pages as page&#125;
+                    &lt;!-- Ellipsis --&gt;
+                    &lt;span
+                        class=&quot;grid h-10 w-10 place-items-center text-sm font-semibold text-slate-400&quot;
+                        class:hidden=&quot;!page.ellipsis&quot;
+                    &gt;
+                        …
+                    &lt;/span&gt;
+
+                    &lt;!-- Page link --&gt;
+                    &lt;a
+                        href=&quot;&#123;page.href&#125;&quot;
+                        aria-label=&quot;Go to page &#123;page.number&#125;&quot;
+                        class=&quot;h-10 min-w-10 items-center justify-center rounded-xl px-3 text-sm font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500&quot;
+                        class:hidden=&quot;page.ellipsis || page.current&quot;
+                        class:inline-flex=&quot;!page.ellipsis &amp;&amp; !page.current&quot;
+                        class:border=&quot;!page.current&quot;
+                        class:border-slate-200=&quot;!page.current&quot;
+                        class:bg-white=&quot;!page.current&quot;
+                        class:text-slate-600=&quot;!page.current&quot;
+                        class:hover:border-indigo-300=&quot;!page.current&quot;
+                        class:hover:bg-indigo-50=&quot;!page.current&quot;
+                        class:hover:text-indigo-700=&quot;!page.current&quot;
+                        class:dark:border-white/10=&quot;!page.current&quot;
+                        class:dark:bg-white/5=&quot;!page.current&quot;
+                        class:dark:text-slate-300=&quot;!page.current&quot;
+                        class:dark:hover:border-indigo-500/30=&quot;!page.current&quot;
+                        class:dark:hover:bg-indigo-500/10=&quot;!page.current&quot;
+                        class:dark:hover:text-indigo-300=&quot;!page.current&quot;
+                    &gt;
+                        &#123;page.number&#125;
+                    &lt;/a&gt;
+
+                    &lt;!-- Current page --&gt;
+                    &lt;span
+                        aria-current=&quot;page&quot;
+                        aria-label=&quot;Current page, page &#123;page.number&#125;&quot;
+                        class=&quot;h-10 min-w-10 items-center justify-center rounded-xl bg-indigo-600 px-3 text-sm font-bold text-white shadow-lg shadow-indigo-600/20&quot;
+                        class:hidden=&quot;page.ellipsis || !page.current&quot;
+                        class:inline-flex=&quot;!page.ellipsis &amp;&amp; page.current&quot;
+                    &gt;
+                        &#123;page.number&#125;
+                    &lt;/span&gt;
+                    &#123;/each&#125;
+                &lt;/div&gt;
+
+                &lt;!-- Mobile page counter --&gt;
+                &lt;div
+                    class=&quot;flex items-center justify-center rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5 text-sm font-medium text-slate-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-400&quot;
+                    class:hidden=&quot;showNumbers&quot;
+                &gt;
+                    Page
+
+                    &lt;span class=&quot;mx-1 font-bold text-slate-950 dark:text-white&quot;&gt;
+                        &#123;currentPage&#125;
+                    &lt;/span&gt;
+
+                    of
+
+                    &lt;span class=&quot;ml-1 font-bold text-slate-950 dark:text-white&quot;&gt;
+                        &#123;totalPages&#125;
+                    &lt;/span&gt;
+                &lt;/div&gt;
+
+                &lt;!-- Next --&gt;
+                &lt;a
+                    href=&quot;&#123;nextHref&#125;&quot;
+                    aria-label=&quot;Go to next page&quot;
+                    class=&quot;group h-11 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950&quot;
+                    class:hidden=&quot;nextHref === ''&quot;
+                    class:inline-flex=&quot;nextHref !== ''&quot;
+                &gt;
+                    &lt;span class:hidden=&quot;compact&quot;&gt;
+                        Next
+                    &lt;/span&gt;
+
+                    &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-0.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                &lt;/a&gt;
+
+                &lt;span
+                    aria-disabled=&quot;true&quot;
+                    class=&quot;h-11 cursor-not-allowed items-center justify-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-4 text-sm font-semibold text-slate-400 dark:border-white/10 dark:bg-white/[0.03] dark:text-slate-600&quot;
+                    class:hidden=&quot;nextHref !== ''&quot;
+                    class:inline-flex=&quot;nextHref === ''&quot;
+                &gt;
+                    &lt;span class:hidden=&quot;compact&quot;&gt;
+                        Next
+                    &lt;/span&gt;
+
+                    &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                &lt;/span&gt;
+            &lt;/div&gt;
+        &lt;/nav&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/panel.wrn b/app/pages/components/panel.wrn
new file mode 100644
index 00000000..1a91821e
--- /dev/null
+++ b/app/pages/components/panel.wrn
@@ -0,0 +1,27 @@
+page Panelcomponent {
+  seo {
+    title = "Panel component"
+    description = "Reusable panel component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Panel</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Panel</h1><p>Reusable panel component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Panel /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Panel&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Panel.wrn</code></p><pre data-language="wrn"><code>component Panel &#123;
+  props &#123;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-panel &#123;class&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/partner-application-form.wrn b/app/pages/components/partner-application-form.wrn
new file mode 100644
index 00000000..6fdea619
--- /dev/null
+++ b/app/pages/components/partner-application-form.wrn
@@ -0,0 +1,34 @@
+page PartnerApplicationFormcomponent {
+  seo {
+    title = "PartnerApplicationForm component"
+    description = "Reusable partner application form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PartnerApplicationForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>PartnerApplicationForm</h1><p>Reusable partner application form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PartnerApplicationForm eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PartnerApplicationForm&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PartnerApplicationForm.wrn</code></p><pre data-language="wrn"><code>component PartnerApplicationForm &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/partner-logo-grid.wrn b/app/pages/components/partner-logo-grid.wrn
new file mode 100644
index 00000000..9f7a02c1
--- /dev/null
+++ b/app/pages/components/partner-logo-grid.wrn
@@ -0,0 +1,31 @@
+page PartnerLogoGridcomponent {
+  seo {
+    title = "PartnerLogoGrid component"
+    description = "Reusable partner logo grid component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PartnerLogoGrid</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>PartnerLogoGrid</h1><p>Reusable partner logo grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PartnerLogoGrid title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PartnerLogoGrid&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PartnerLogoGrid.wrn</code></p><pre data-language="wrn"><code>component PartnerLogoGrid &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/partner-program-card.wrn b/app/pages/components/partner-program-card.wrn
new file mode 100644
index 00000000..d0e4dd5f
--- /dev/null
+++ b/app/pages/components/partner-program-card.wrn
@@ -0,0 +1,34 @@
+page PartnerProgramCardcomponent {
+  seo {
+    title = "PartnerProgramCard component"
+    description = "Reusable partner program card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PartnerProgramCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>PartnerProgramCard</h1><p>Reusable partner program card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PartnerProgramCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PartnerProgramCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PartnerProgramCard.wrn</code></p><pre data-language="wrn"><code>component PartnerProgramCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/passkey-button.wrn b/app/pages/components/passkey-button.wrn
new file mode 100644
index 00000000..dd2ee741
--- /dev/null
+++ b/app/pages/components/passkey-button.wrn
@@ -0,0 +1,32 @@
+page PasskeyButtoncomponent {
+  seo {
+    title = "PasskeyButton component"
+    description = "Reusable passkey button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PasskeyButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>PasskeyButton</h1><p>Reusable passkey button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PasskeyButton label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PasskeyButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PasskeyButton.wrn</code></p><pre data-language="wrn"><code>component PasskeyButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/password-input.wrn b/app/pages/components/password-input.wrn
new file mode 100644
index 00000000..7ba3e877
--- /dev/null
+++ b/app/pages/components/password-input.wrn
@@ -0,0 +1,45 @@
+page PasswordInputcomponent {
+  seo {
+    title = "PasswordInput component"
+    description = "Reusable password input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PasswordInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>PasswordInput</h1><p>Reusable password input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>12 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PasswordInput id=&quot;id&quot; name=&quot;name&quot; label=&quot;Password&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PasswordInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Password&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>autocomplete</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PasswordInput.wrn</code></p><pre data-language="wrn"><code>component PasswordInput &#123;
+  props &#123;
+    class = &quot;&quot;
+    id = &quot;&quot;
+    name = &quot;&quot;
+    label = &quot;Password&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    help = &quot;&quot;
+    error = &quot;&quot;
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;space-y-2 &#123;class&#125;&quot;&gt;
+      &lt;label for=&quot;&#123;id&#125;&quot; class=&quot;block text-sm font-semibold text-slate-800 dark:text-slate-200&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;ml-1 text-red-500&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
+      &lt;input id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; type=&quot;password&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; autocomplete=&quot;&#123;autocomplete&#125;&quot; aria-invalid=&quot;&#123;!!error&#125;&quot; aria-describedby=&quot;&#123;id&#125;-help &#123;id&#125;-error&quot; class=&quot;min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white &#123;error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'&#125;&quot; /&gt;
+      &lt;p id=&quot;&#123;id&#125;-help&quot; data-show=&quot;help &amp;&amp; !error&quot; class=&quot;text-sm text-slate-500 dark:text-slate-400&quot;&gt;&#123;help&#125;&lt;/p&gt;
+      &lt;p id=&quot;&#123;id&#125;-error&quot; data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;text-sm font-medium text-red-600 dark:text-red-400&quot;&gt;&#123;error&#125;&lt;/p&gt;
+    &lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/password-requirement-list.wrn b/app/pages/components/password-requirement-list.wrn
new file mode 100644
index 00000000..ec883bd5
--- /dev/null
+++ b/app/pages/components/password-requirement-list.wrn
@@ -0,0 +1,31 @@
+page PasswordRequirementListcomponent {
+  seo {
+    title = "PasswordRequirementList component"
+    description = "Reusable password requirement list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PasswordRequirementList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>PasswordRequirementList</h1><p>Reusable password requirement list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PasswordRequirementList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PasswordRequirementList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PasswordRequirementList.wrn</code></p><pre data-language="wrn"><code>component PasswordRequirementList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/password-strength-meter.wrn b/app/pages/components/password-strength-meter.wrn
new file mode 100644
index 00000000..acec78f5
--- /dev/null
+++ b/app/pages/components/password-strength-meter.wrn
@@ -0,0 +1,32 @@
+page PasswordStrengthMetercomponent {
+  seo {
+    title = "PasswordStrengthMeter component"
+    description = "Reusable password strength meter component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PasswordStrengthMeter</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>PasswordStrengthMeter</h1><p>Reusable password strength meter component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PasswordStrengthMeter title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PasswordStrengthMeter&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PasswordStrengthMeter.wrn</code></p><pre data-language="wrn"><code>component PasswordStrengthMeter &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/password-visibility-toggle.wrn b/app/pages/components/password-visibility-toggle.wrn
new file mode 100644
index 00000000..1f9a41fb
--- /dev/null
+++ b/app/pages/components/password-visibility-toggle.wrn
@@ -0,0 +1,37 @@
+page PasswordVisibilityTogglecomponent {
+  seo {
+    title = "PasswordVisibilityToggle component"
+    description = "Reusable password visibility toggle component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PasswordVisibilityToggle</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>PasswordVisibilityToggle</h1><p>Reusable password visibility toggle component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PasswordVisibilityToggle label=&quot;PasswordVisibility&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PasswordVisibilityToggle&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;PasswordVisibility&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PasswordVisibilityToggle.wrn</code></p><pre data-language="wrn"><code>component PasswordVisibilityToggle &#123;
+  props &#123;
+    label = &quot;PasswordVisibility&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/path-input.wrn b/app/pages/components/path-input.wrn
new file mode 100644
index 00000000..10f2de92
--- /dev/null
+++ b/app/pages/components/path-input.wrn
@@ -0,0 +1,37 @@
+page PathInputcomponent {
+  seo {
+    title = "PathInput component"
+    description = "Reusable path input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PathInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>PathInput</h1><p>Reusable path input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PathInput label=&quot;Path&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PathInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Path&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PathInput.wrn</code></p><pre data-language="wrn"><code>component PathInput &#123;
+  props &#123;
+    label = &quot;Path&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/payment-method-card.wrn b/app/pages/components/payment-method-card.wrn
new file mode 100644
index 00000000..bef5ef10
--- /dev/null
+++ b/app/pages/components/payment-method-card.wrn
@@ -0,0 +1,34 @@
+page PaymentMethodCardcomponent {
+  seo {
+    title = "PaymentMethodCard component"
+    description = "Reusable payment method card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PaymentMethodCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>PaymentMethodCard</h1><p>Reusable payment method card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PaymentMethodCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PaymentMethodCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PaymentMethodCard.wrn</code></p><pre data-language="wrn"><code>component PaymentMethodCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/pdf-preview.wrn b/app/pages/components/pdf-preview.wrn
new file mode 100644
index 00000000..014e5086
--- /dev/null
+++ b/app/pages/components/pdf-preview.wrn
@@ -0,0 +1,34 @@
+page PdfPreviewcomponent {
+  seo {
+    title = "PdfPreview component"
+    description = "Reusable pdf preview component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PdfPreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>PdfPreview</h1><p>Reusable pdf preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PdfPreview eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PdfPreview&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PdfPreview.wrn</code></p><pre data-language="wrn"><code>component PdfPreview &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/percentage-input.wrn b/app/pages/components/percentage-input.wrn
new file mode 100644
index 00000000..6cecae67
--- /dev/null
+++ b/app/pages/components/percentage-input.wrn
@@ -0,0 +1,37 @@
+page PercentageInputcomponent {
+  seo {
+    title = "PercentageInput component"
+    description = "Reusable percentage input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PercentageInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>PercentageInput</h1><p>Reusable percentage input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PercentageInput label=&quot;Percentage&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PercentageInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Percentage&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PercentageInput.wrn</code></p><pre data-language="wrn"><code>component PercentageInput &#123;
+  props &#123;
+    label = &quot;Percentage&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/permission-selector.wrn b/app/pages/components/permission-selector.wrn
new file mode 100644
index 00000000..363d9ede
--- /dev/null
+++ b/app/pages/components/permission-selector.wrn
@@ -0,0 +1,37 @@
+page PermissionSelectorcomponent {
+  seo {
+    title = "PermissionSelector component"
+    description = "Reusable permission selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PermissionSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>PermissionSelector</h1><p>Reusable permission selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PermissionSelector label=&quot;Permission&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PermissionSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Permission&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PermissionSelector.wrn</code></p><pre data-language="wrn"><code>component PermissionSelector &#123;
+  props &#123;
+    label = &quot;Permission&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/phone-input.wrn b/app/pages/components/phone-input.wrn
new file mode 100644
index 00000000..c0253dd0
--- /dev/null
+++ b/app/pages/components/phone-input.wrn
@@ -0,0 +1,45 @@
+page PhoneInputcomponent {
+  seo {
+    title = "PhoneInput component"
+    description = "Reusable phone input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PhoneInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>PhoneInput</h1><p>Reusable phone input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>12 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PhoneInput id=&quot;id&quot; name=&quot;name&quot; label=&quot;Phone&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PhoneInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Phone&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>autocomplete</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PhoneInput.wrn</code></p><pre data-language="wrn"><code>component PhoneInput &#123;
+  props &#123;
+    class = &quot;&quot;
+    id = &quot;&quot;
+    name = &quot;&quot;
+    label = &quot;Phone&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    help = &quot;&quot;
+    error = &quot;&quot;
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;space-y-2 &#123;class&#125;&quot;&gt;
+      &lt;label for=&quot;&#123;id&#125;&quot; class=&quot;block text-sm font-semibold text-slate-800 dark:text-slate-200&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;ml-1 text-red-500&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
+      &lt;input id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; type=&quot;tel&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; autocomplete=&quot;&#123;autocomplete&#125;&quot; aria-invalid=&quot;&#123;!!error&#125;&quot; aria-describedby=&quot;&#123;id&#125;-help &#123;id&#125;-error&quot; class=&quot;min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white &#123;error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'&#125;&quot; /&gt;
+      &lt;p id=&quot;&#123;id&#125;-help&quot; data-show=&quot;help &amp;&amp; !error&quot; class=&quot;text-sm text-slate-500 dark:text-slate-400&quot;&gt;&#123;help&#125;&lt;/p&gt;
+      &lt;p id=&quot;&#123;id&#125;-error&quot; data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;text-sm font-medium text-red-600 dark:text-red-400&quot;&gt;&#123;error&#125;&lt;/p&gt;
+    &lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/pie-chart.wrn b/app/pages/components/pie-chart.wrn
new file mode 100644
index 00000000..3140220a
--- /dev/null
+++ b/app/pages/components/pie-chart.wrn
@@ -0,0 +1,32 @@
+page PieChartcomponent {
+  seo {
+    title = "PieChart component"
+    description = "Reusable pie chart component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PieChart</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>PieChart</h1><p>Reusable pie chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PieChart title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PieChart&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PieChart.wrn</code></p><pre data-language="wrn"><code>component PieChart &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/pill.wrn b/app/pages/components/pill.wrn
new file mode 100644
index 00000000..e28329d7
--- /dev/null
+++ b/app/pages/components/pill.wrn
@@ -0,0 +1,29 @@
+page Pillcomponent {
+  seo {
+    title = "Pill component"
+    description = "Reusable pill component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Pill</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Pill</h1><p>Reusable pill component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Pill label=&quot;Pill&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Pill&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Pill&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Pill.wrn</code></p><pre data-language="wrn"><code>component Pill &#123;
+  props &#123;
+    label = &quot;Pill&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-badge wire-badge--&#123;variant&#125; wire-catalog-badge wire-catalog-badge--pill &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/pin-input.wrn b/app/pages/components/pin-input.wrn
new file mode 100644
index 00000000..c6ce073b
--- /dev/null
+++ b/app/pages/components/pin-input.wrn
@@ -0,0 +1,37 @@
+page PinInputcomponent {
+  seo {
+    title = "PinInput component"
+    description = "Reusable pin input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PinInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>PinInput</h1><p>Reusable pin input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PinInput label=&quot;Pin&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PinInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Pin&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PinInput.wrn</code></p><pre data-language="wrn"><code>component PinInput &#123;
+  props &#123;
+    label = &quot;Pin&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/plain-text-editor.wrn b/app/pages/components/plain-text-editor.wrn
new file mode 100644
index 00000000..2088c9f3
--- /dev/null
+++ b/app/pages/components/plain-text-editor.wrn
@@ -0,0 +1,37 @@
+page PlainTextEditorcomponent {
+  seo {
+    title = "PlainTextEditor component"
+    description = "Reusable plain text editor component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PlainTextEditor</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>PlainTextEditor</h1><p>Reusable plain text editor component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PlainTextEditor label=&quot;PlainText&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PlainTextEditor&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;PlainText&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PlainTextEditor.wrn</code></p><pre data-language="wrn"><code>component PlainTextEditor &#123;
+  props &#123;
+    label = &quot;PlainText&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/plan-cta.wrn b/app/pages/components/plan-cta.wrn
new file mode 100644
index 00000000..5c4768d0
--- /dev/null
+++ b/app/pages/components/plan-cta.wrn
@@ -0,0 +1,32 @@
+page PlanCTAcomponent {
+  seo {
+    title = "PlanCTA component"
+    description = "Reusable plan c t a component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PlanCTA</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>PlanCTA</h1><p>Reusable plan c t a component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PlanCTA label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PlanCTA&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PlanCTA.wrn</code></p><pre data-language="wrn"><code>component PlanCTA &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/plan-feature-list.wrn b/app/pages/components/plan-feature-list.wrn
new file mode 100644
index 00000000..f521755d
--- /dev/null
+++ b/app/pages/components/plan-feature-list.wrn
@@ -0,0 +1,31 @@
+page PlanFeatureListcomponent {
+  seo {
+    title = "PlanFeatureList component"
+    description = "Reusable plan feature list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PlanFeatureList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>PlanFeatureList</h1><p>Reusable plan feature list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PlanFeatureList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PlanFeatureList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PlanFeatureList.wrn</code></p><pre data-language="wrn"><code>component PlanFeatureList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/plan-limit-list.wrn b/app/pages/components/plan-limit-list.wrn
new file mode 100644
index 00000000..61cc8d01
--- /dev/null
+++ b/app/pages/components/plan-limit-list.wrn
@@ -0,0 +1,31 @@
+page PlanLimitListcomponent {
+  seo {
+    title = "PlanLimitList component"
+    description = "Reusable plan limit list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PlanLimitList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>PlanLimitList</h1><p>Reusable plan limit list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PlanLimitList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PlanLimitList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PlanLimitList.wrn</code></p><pre data-language="wrn"><code>component PlanLimitList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/plan-selector.wrn b/app/pages/components/plan-selector.wrn
new file mode 100644
index 00000000..635d546b
--- /dev/null
+++ b/app/pages/components/plan-selector.wrn
@@ -0,0 +1,37 @@
+page PlanSelectorcomponent {
+  seo {
+    title = "PlanSelector component"
+    description = "Reusable plan selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PlanSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>PlanSelector</h1><p>Reusable plan selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PlanSelector label=&quot;Plan&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PlanSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Plan&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PlanSelector.wrn</code></p><pre data-language="wrn"><code>component PlanSelector &#123;
+  props &#123;
+    label = &quot;Plan&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/platform-pillar-card.wrn b/app/pages/components/platform-pillar-card.wrn
new file mode 100644
index 00000000..e34b8b7d
--- /dev/null
+++ b/app/pages/components/platform-pillar-card.wrn
@@ -0,0 +1,34 @@
+page PlatformPillarCardcomponent {
+  seo {
+    title = "PlatformPillarCard component"
+    description = "Reusable platform pillar card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PlatformPillarCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>PlatformPillarCard</h1><p>Reusable platform pillar card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PlatformPillarCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PlatformPillarCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PlatformPillarCard.wrn</code></p><pre data-language="wrn"><code>component PlatformPillarCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/policy-version-table.wrn b/app/pages/components/policy-version-table.wrn
new file mode 100644
index 00000000..384f5e77
--- /dev/null
+++ b/app/pages/components/policy-version-table.wrn
@@ -0,0 +1,31 @@
+page PolicyVersionTablecomponent {
+  seo {
+    title = "PolicyVersionTable component"
+    description = "Reusable policy version table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PolicyVersionTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>PolicyVersionTable</h1><p>Reusable policy version table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PolicyVersionTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PolicyVersionTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PolicyVersionTable.wrn</code></p><pre data-language="wrn"><code>component PolicyVersionTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/popover.wrn b/app/pages/components/popover.wrn
new file mode 100644
index 00000000..cf8da898
--- /dev/null
+++ b/app/pages/components/popover.wrn
@@ -0,0 +1,31 @@
+page Popovercomponent {
+  seo {
+    title = "Popover component"
+    description = "Reusable popover component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Popover</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Popover</h1><p>Reusable popover component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Popover title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Popover&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Popover.wrn</code></p><pre data-language="wrn"><code>component Popover &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/port-input.wrn b/app/pages/components/port-input.wrn
new file mode 100644
index 00000000..41c59c5b
--- /dev/null
+++ b/app/pages/components/port-input.wrn
@@ -0,0 +1,37 @@
+page PortInputcomponent {
+  seo {
+    title = "PortInput component"
+    description = "Reusable port input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PortInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>PortInput</h1><p>Reusable port input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PortInput label=&quot;Port&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PortInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Port&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PortInput.wrn</code></p><pre data-language="wrn"><code>component PortInput &#123;
+  props &#123;
+    label = &quot;Port&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/port-number-input.wrn b/app/pages/components/port-number-input.wrn
new file mode 100644
index 00000000..ea975e2a
--- /dev/null
+++ b/app/pages/components/port-number-input.wrn
@@ -0,0 +1,37 @@
+page PortNumberInputcomponent {
+  seo {
+    title = "PortNumberInput component"
+    description = "Reusable port number input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PortNumberInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>PortNumberInput</h1><p>Reusable port number input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PortNumberInput label=&quot;PortNumber&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PortNumberInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;PortNumber&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PortNumberInput.wrn</code></p><pre data-language="wrn"><code>component PortNumberInput &#123;
+  props &#123;
+    label = &quot;PortNumber&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/positive-number-input.wrn b/app/pages/components/positive-number-input.wrn
new file mode 100644
index 00000000..20e52e11
--- /dev/null
+++ b/app/pages/components/positive-number-input.wrn
@@ -0,0 +1,37 @@
+page PositiveNumberInputcomponent {
+  seo {
+    title = "PositiveNumberInput component"
+    description = "Reusable positive number input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PositiveNumberInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>PositiveNumberInput</h1><p>Reusable positive number input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PositiveNumberInput label=&quot;PositiveNumber&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PositiveNumberInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;PositiveNumber&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PositiveNumberInput.wrn</code></p><pre data-language="wrn"><code>component PositiveNumberInput &#123;
+  props &#123;
+    label = &quot;PositiveNumber&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/postal-code-input.wrn b/app/pages/components/postal-code-input.wrn
new file mode 100644
index 00000000..a9f81032
--- /dev/null
+++ b/app/pages/components/postal-code-input.wrn
@@ -0,0 +1,37 @@
+page PostalCodeInputcomponent {
+  seo {
+    title = "PostalCodeInput component"
+    description = "Reusable postal code input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PostalCodeInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>PostalCodeInput</h1><p>Reusable postal code input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PostalCodeInput label=&quot;PostalCode&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PostalCodeInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;PostalCode&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PostalCodeInput.wrn</code></p><pre data-language="wrn"><code>component PostalCodeInput &#123;
+  props &#123;
+    label = &quot;PostalCode&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/postman-cta.wrn b/app/pages/components/postman-cta.wrn
new file mode 100644
index 00000000..02c3b8e6
--- /dev/null
+++ b/app/pages/components/postman-cta.wrn
@@ -0,0 +1,32 @@
+page PostmanCTAcomponent {
+  seo {
+    title = "PostmanCTA component"
+    description = "Reusable postman c t a component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PostmanCTA</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>PostmanCTA</h1><p>Reusable postman c t a component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PostmanCTA label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PostmanCTA&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PostmanCTA.wrn</code></p><pre data-language="wrn"><code>component PostmanCTA &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/preset-date-range-picker.wrn b/app/pages/components/preset-date-range-picker.wrn
new file mode 100644
index 00000000..808f416a
--- /dev/null
+++ b/app/pages/components/preset-date-range-picker.wrn
@@ -0,0 +1,37 @@
+page PresetDateRangePickercomponent {
+  seo {
+    title = "PresetDateRangePicker component"
+    description = "Reusable preset date range picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PresetDateRangePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>PresetDateRangePicker</h1><p>Reusable preset date range picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PresetDateRangePicker label=&quot;PresetDateRange&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PresetDateRangePicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;PresetDateRange&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PresetDateRangePicker.wrn</code></p><pre data-language="wrn"><code>component PresetDateRangePicker &#123;
+  props &#123;
+    label = &quot;PresetDateRange&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/press-release-card.wrn b/app/pages/components/press-release-card.wrn
new file mode 100644
index 00000000..c1fe099d
--- /dev/null
+++ b/app/pages/components/press-release-card.wrn
@@ -0,0 +1,34 @@
+page PressReleaseCardcomponent {
+  seo {
+    title = "PressReleaseCard component"
+    description = "Reusable press release card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PressReleaseCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>PressReleaseCard</h1><p>Reusable press release card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PressReleaseCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PressReleaseCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PressReleaseCard.wrn</code></p><pre data-language="wrn"><code>component PressReleaseCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/preview-badge.wrn b/app/pages/components/preview-badge.wrn
new file mode 100644
index 00000000..703d3d99
--- /dev/null
+++ b/app/pages/components/preview-badge.wrn
@@ -0,0 +1,29 @@
+page PreviewBadgecomponent {
+  seo {
+    title = "PreviewBadge component"
+    description = "Reusable preview badge component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PreviewBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>PreviewBadge</h1><p>Reusable preview badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PreviewBadge label=&quot;Preview&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PreviewBadge&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Preview&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PreviewBadge.wrn</code></p><pre data-language="wrn"><code>component PreviewBadge &#123;
+  props &#123;
+    label = &quot;Preview&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-badge wire-badge--&#123;variant&#125; wire-catalog-badge wire-catalog-badge--previewbadge &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/previous-next-navigation.wrn b/app/pages/components/previous-next-navigation.wrn
new file mode 100644
index 00000000..92695d0c
--- /dev/null
+++ b/app/pages/components/previous-next-navigation.wrn
@@ -0,0 +1,31 @@
+page PreviousNextNavigationcomponent {
+  seo {
+    title = "PreviousNextNavigation component"
+    description = "Reusable previous next navigation component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PreviousNextNavigation</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>PreviousNextNavigation</h1><p>Reusable previous next navigation component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PreviousNextNavigation eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PreviousNextNavigation&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PreviousNextNavigation.wrn</code></p><pre data-language="wrn"><code>component PreviousNextNavigation &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/price-input.wrn b/app/pages/components/price-input.wrn
new file mode 100644
index 00000000..08172b4c
--- /dev/null
+++ b/app/pages/components/price-input.wrn
@@ -0,0 +1,37 @@
+page PriceInputcomponent {
+  seo {
+    title = "PriceInput component"
+    description = "Reusable price input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PriceInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>PriceInput</h1><p>Reusable price input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PriceInput label=&quot;Price&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PriceInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Price&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PriceInput.wrn</code></p><pre data-language="wrn"><code>component PriceInput &#123;
+  props &#123;
+    label = &quot;Price&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/price-range-slider.wrn b/app/pages/components/price-range-slider.wrn
new file mode 100644
index 00000000..9165d1f4
--- /dev/null
+++ b/app/pages/components/price-range-slider.wrn
@@ -0,0 +1,34 @@
+page PriceRangeSlidercomponent {
+  seo {
+    title = "PriceRangeSlider component"
+    description = "Reusable price range slider component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PriceRangeSlider</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>PriceRangeSlider</h1><p>Reusable price range slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PriceRangeSlider eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PriceRangeSlider&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PriceRangeSlider.wrn</code></p><pre data-language="wrn"><code>component PriceRangeSlider &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/price-text.wrn b/app/pages/components/price-text.wrn
new file mode 100644
index 00000000..793177da
--- /dev/null
+++ b/app/pages/components/price-text.wrn
@@ -0,0 +1,29 @@
+page PriceTextcomponent {
+  seo {
+    title = "PriceText component"
+    description = "Reusable price text component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PriceText</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>PriceText</h1><p>Reusable price text component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PriceText text=&quot;text&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PriceText&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>text</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PriceText.wrn</code></p><pre data-language="wrn"><code>component PriceText &#123;
+  props &#123;
+    text = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-type wire-type--display wire-text--&#123;align&#125;  &#123;class&#125;&quot;&gt;&#123;text&#125;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/pricing-card.wrn b/app/pages/components/pricing-card.wrn
new file mode 100644
index 00000000..f23ee266
--- /dev/null
+++ b/app/pages/components/pricing-card.wrn
@@ -0,0 +1,34 @@
+page PricingCardcomponent {
+  seo {
+    title = "PricingCard component"
+    description = "Reusable pricing card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PricingCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>PricingCard</h1><p>Reusable pricing card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PricingCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PricingCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PricingCard.wrn</code></p><pre data-language="wrn"><code>component PricingCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/pricing-comparison-table.wrn b/app/pages/components/pricing-comparison-table.wrn
new file mode 100644
index 00000000..08ee377d
--- /dev/null
+++ b/app/pages/components/pricing-comparison-table.wrn
@@ -0,0 +1,30 @@
+page PricingComparisonTablecomponent {
+  seo {
+    title = "PricingComparisonTable component"
+    description = "Reusable pricing comparison table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PricingComparisonTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>PricingComparisonTable</h1><p>Reusable pricing comparison table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PricingComparisonTable caption=&quot;Plan comparison&quot; plans=&quot;[]&quot; features=&quot;[]&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PricingComparisonTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>caption</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Plan comparison&quot;</code></td></tr><tr><td><code>plans</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>features</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PricingComparisonTable.wrn</code></p><pre data-language="wrn"><code>component PricingComparisonTable &#123;
+  props &#123;
+    caption = &quot;Plan comparison&quot;
+    plans = []
+    features = []
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-table-wrap &#123;class&#125;&quot; tabindex=&quot;0&quot; role=&quot;region&quot; aria-label=&quot;&#123;caption&#125;&quot;&gt;&lt;table class=&quot;wire-table wire-comparison-table&quot;&gt;&lt;caption class=&quot;wire-visually-hidden&quot;&gt;&#123;caption&#125;&lt;/caption&gt;&lt;thead&gt;&lt;tr&gt;&lt;th scope=&quot;col&quot;&gt;Feature&lt;/th&gt;&#123;#each plans as plan&#125;&lt;th scope=&quot;col&quot;&gt;&#123;plan.name&#125;&lt;/th&gt;&#123;/each&#125;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&#123;#each features as feature&#125;&lt;tr&gt;&lt;th scope=&quot;row&quot;&gt;&#123;feature.label&#125;&lt;/th&gt;&#123;#each feature.values as value&#125;&lt;td&gt;&#123;value&#125;&lt;/td&gt;&#123;/each&#125;&lt;/tr&gt;&#123;/each&#125;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/pricing-contact-form.wrn b/app/pages/components/pricing-contact-form.wrn
new file mode 100644
index 00000000..8d450fa9
--- /dev/null
+++ b/app/pages/components/pricing-contact-form.wrn
@@ -0,0 +1,34 @@
+page PricingContactFormcomponent {
+  seo {
+    title = "PricingContactForm component"
+    description = "Reusable pricing contact form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PricingContactForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>PricingContactForm</h1><p>Reusable pricing contact form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PricingContactForm eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PricingContactForm&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PricingContactForm.wrn</code></p><pre data-language="wrn"><code>component PricingContactForm &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/pricing-feature-group.wrn b/app/pages/components/pricing-feature-group.wrn
new file mode 100644
index 00000000..708d97c6
--- /dev/null
+++ b/app/pages/components/pricing-feature-group.wrn
@@ -0,0 +1,37 @@
+page PricingFeatureGroupcomponent {
+  seo {
+    title = "PricingFeatureGroup component"
+    description = "Reusable pricing feature group component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PricingFeatureGroup</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>PricingFeatureGroup</h1><p>Reusable pricing feature group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PricingFeatureGroup label=&quot;PricingFeature&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PricingFeatureGroup&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;PricingFeature&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PricingFeatureGroup.wrn</code></p><pre data-language="wrn"><code>component PricingFeatureGroup &#123;
+  props &#123;
+    label = &quot;PricingFeature&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/pricing-grid.wrn b/app/pages/components/pricing-grid.wrn
new file mode 100644
index 00000000..4c48a1fd
--- /dev/null
+++ b/app/pages/components/pricing-grid.wrn
@@ -0,0 +1,31 @@
+page PricingGridcomponent {
+  seo {
+    title = "PricingGrid component"
+    description = "Reusable pricing grid component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PricingGrid</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>PricingGrid</h1><p>Reusable pricing grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PricingGrid title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PricingGrid&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PricingGrid.wrn</code></p><pre data-language="wrn"><code>component PricingGrid &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/pricing-hero.wrn b/app/pages/components/pricing-hero.wrn
new file mode 100644
index 00000000..5d3f5df4
--- /dev/null
+++ b/app/pages/components/pricing-hero.wrn
@@ -0,0 +1,31 @@
+page PricingHerocomponent {
+  seo {
+    title = "PricingHero component"
+    description = "Reusable pricing hero component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PricingHero</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>PricingHero</h1><p>Reusable pricing hero component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PricingHero eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PricingHero&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PricingHero.wrn</code></p><pre data-language="wrn"><code>component PricingHero &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/pricing-plan-card.wrn b/app/pages/components/pricing-plan-card.wrn
new file mode 100644
index 00000000..4ab9a0d2
--- /dev/null
+++ b/app/pages/components/pricing-plan-card.wrn
@@ -0,0 +1,36 @@
+page PricingPlanCardcomponent {
+  seo {
+    title = "PricingPlanCard component"
+    description = "Reusable pricing plan card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PricingPlanCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>PricingPlanCard</h1><p>Reusable pricing plan card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PricingPlanCard name=&quot;Starter&quot; description=&quot;description&quot; price=&quot;₹0&quot; period=&quot;/month&quot; featured=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PricingPlanCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Starter&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>price</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;₹0&quot;</code></td></tr><tr><td><code>period</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;/month&quot;</code></td></tr><tr><td><code>featured</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>ctaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Choose plan&quot;</code></td></tr><tr><td><code>ctaHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;#&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PricingPlanCard.wrn</code></p><pre data-language="wrn"><code>component PricingPlanCard &#123;
+  props &#123;
+    class = &quot;&quot;
+    name = &quot;Starter&quot;
+    description = &quot;&quot;
+    price = &quot;₹0&quot;
+    period = &quot;/month&quot;
+    featured = false
+    ctaLabel = &quot;Choose plan&quot;
+    ctaHref = &quot;#&quot;
+  &#125;
+  view &#123;
+    &lt;article class=&quot;relative flex h-full flex-col rounded-3xl border p-6 shadow-sm &#123;featured ? 'border-violet-500 bg-violet-50/50 ring-2 ring-violet-500 dark:bg-violet-950/20' : 'border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900'&#125; &#123;class&#125;&quot;&gt;&lt;Badge data-show=&quot;featured&quot; label=&quot;Most popular&quot; variant=&quot;brand&quot; /&gt;&lt;h3 class=&quot;mt-4 text-xl font-bold&quot;&gt;&#123;name&#125;&lt;/h3&gt;&lt;p class=&quot;mt-2 text-sm text-slate-500&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;div class=&quot;mt-6&quot;&gt;&lt;span class=&quot;text-4xl font-black&quot;&gt;&#123;price&#125;&lt;/span&gt;&lt;span class=&quot;text-slate-500&quot;&gt;&#123;period&#125;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;mt-6 flex-1&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;a href=&quot;&#123;ctaHref&#125;&quot; class=&quot;mt-6 inline-flex min-h-12 items-center justify-center rounded-xl font-semibold transition &#123;featured ? 'bg-violet-600 text-white hover:bg-violet-700' : 'border border-slate-300 hover:bg-slate-50 dark:border-slate-700'&#125;&quot;&gt;&#123;ctaLabel&#125;&lt;/a&gt;&lt;/article&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/pricing-table.wrn b/app/pages/components/pricing-table.wrn
new file mode 100644
index 00000000..7d37107a
--- /dev/null
+++ b/app/pages/components/pricing-table.wrn
@@ -0,0 +1,31 @@
+page PricingTablecomponent {
+  seo {
+    title = "PricingTable component"
+    description = "Reusable pricing table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PricingTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>PricingTable</h1><p>Reusable pricing table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PricingTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PricingTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PricingTable.wrn</code></p><pre data-language="wrn"><code>component PricingTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/pricing-toggle.wrn b/app/pages/components/pricing-toggle.wrn
new file mode 100644
index 00000000..938e643b
--- /dev/null
+++ b/app/pages/components/pricing-toggle.wrn
@@ -0,0 +1,37 @@
+page PricingTogglecomponent {
+  seo {
+    title = "PricingToggle component"
+    description = "Reusable pricing toggle component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PricingToggle</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>PricingToggle</h1><p>Reusable pricing toggle component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PricingToggle label=&quot;Pricing&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PricingToggle&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Pricing&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PricingToggle.wrn</code></p><pre data-language="wrn"><code>component PricingToggle &#123;
+  props &#123;
+    label = &quot;Pricing&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/primary-button.wrn b/app/pages/components/primary-button.wrn
new file mode 100644
index 00000000..27ea316b
--- /dev/null
+++ b/app/pages/components/primary-button.wrn
@@ -0,0 +1,30 @@
+page PrimaryButtoncomponent {
+  seo {
+    title = "PrimaryButton component"
+    description = "Reusable primary button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PrimaryButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>PrimaryButton</h1><p>Reusable primary button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PrimaryButton label=&quot;Action&quot; type=&quot;button&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PrimaryButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PrimaryButton.wrn</code></p><pre data-language="wrn"><code>component PrimaryButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    type = &quot;button&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;button type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--primary &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/print-action.wrn b/app/pages/components/print-action.wrn
new file mode 100644
index 00000000..6f46ee8e
--- /dev/null
+++ b/app/pages/components/print-action.wrn
@@ -0,0 +1,32 @@
+page PrintActioncomponent {
+  seo {
+    title = "PrintAction component"
+    description = "Reusable print action component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PrintAction</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>PrintAction</h1><p>Reusable print action component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PrintAction label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PrintAction&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PrintAction.wrn</code></p><pre data-language="wrn"><code>component PrintAction &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/print-policy-button.wrn b/app/pages/components/print-policy-button.wrn
new file mode 100644
index 00000000..6cbc9194
--- /dev/null
+++ b/app/pages/components/print-policy-button.wrn
@@ -0,0 +1,32 @@
+page PrintPolicyButtoncomponent {
+  seo {
+    title = "PrintPolicyButton component"
+    description = "Reusable print policy button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PrintPolicyButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>PrintPolicyButton</h1><p>Reusable print policy button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PrintPolicyButton label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PrintPolicyButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PrintPolicyButton.wrn</code></p><pre data-language="wrn"><code>component PrintPolicyButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/priority-selector.wrn b/app/pages/components/priority-selector.wrn
new file mode 100644
index 00000000..890842c8
--- /dev/null
+++ b/app/pages/components/priority-selector.wrn
@@ -0,0 +1,37 @@
+page PrioritySelectorcomponent {
+  seo {
+    title = "PrioritySelector component"
+    description = "Reusable priority selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PrioritySelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>PrioritySelector</h1><p>Reusable priority selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PrioritySelector label=&quot;Priority&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PrioritySelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Priority&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PrioritySelector.wrn</code></p><pre data-language="wrn"><code>component PrioritySelector &#123;
+  props &#123;
+    label = &quot;Priority&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/privacy-notice.wrn b/app/pages/components/privacy-notice.wrn
new file mode 100644
index 00000000..11786cc0
--- /dev/null
+++ b/app/pages/components/privacy-notice.wrn
@@ -0,0 +1,32 @@
+page PrivacyNoticecomponent {
+  seo {
+    title = "PrivacyNotice component"
+    description = "Reusable privacy notice component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PrivacyNotice</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>PrivacyNotice</h1><p>Reusable privacy notice component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PrivacyNotice label=&quot;Privacy&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PrivacyNotice&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Privacy&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PrivacyNotice.wrn</code></p><pre data-language="wrn"><code>component PrivacyNotice &#123;
+  props &#123;
+    label = &quot;Privacy&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/product-architecture-diagram.wrn b/app/pages/components/product-architecture-diagram.wrn
new file mode 100644
index 00000000..35f6f0bf
--- /dev/null
+++ b/app/pages/components/product-architecture-diagram.wrn
@@ -0,0 +1,32 @@
+page ProductArchitectureDiagramcomponent {
+  seo {
+    title = "ProductArchitectureDiagram component"
+    description = "Reusable product architecture diagram component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProductArchitectureDiagram</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>ProductArchitectureDiagram</h1><p>Reusable product architecture diagram component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProductArchitectureDiagram title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProductArchitectureDiagram&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProductArchitectureDiagram.wrn</code></p><pre data-language="wrn"><code>component ProductArchitectureDiagram &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/product-card.wrn b/app/pages/components/product-card.wrn
new file mode 100644
index 00000000..60ce31a4
--- /dev/null
+++ b/app/pages/components/product-card.wrn
@@ -0,0 +1,33 @@
+page ProductCardcomponent {
+  seo {
+    title = "ProductCard component"
+    description = "Reusable product card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProductCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ProductCard</h1><p>Reusable product card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>7 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProductCard eyebrow=&quot;Product&quot; title=&quot;Product name&quot; description=&quot;description&quot; href=&quot;#&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProductCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Product&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Product name&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;#&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>status</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProductCard.wrn</code></p><pre data-language="wrn"><code>component ProductCard &#123;
+  props &#123;
+    eyebrow = &quot;Product&quot;
+    title = &quot;Product name&quot;
+    description = &quot;&quot;
+    href = &quot;#&quot;
+    actionLabel = &quot;Learn more&quot;
+    status = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-product-card &#123;class&#125;&quot;&gt;&lt;div class=&quot;wire-product-card__meta&quot;&gt;&lt;span class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;span data-show=&quot;status&quot; class=&quot;wire-badge&quot;&gt;&#123;status&#125;&lt;/span&gt;&lt;/div&gt;&lt;h3&gt;&#123;title&#125;&lt;/h3&gt;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&lt;a href=&quot;&#123;href&#125;&quot; class=&quot;wire-product-card__link&quot;&gt;&#123;actionLabel&#125;&lt;span aria-hidden=&quot;true&quot;&gt; →&lt;/span&gt;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/product-category-section.wrn b/app/pages/components/product-category-section.wrn
new file mode 100644
index 00000000..4d2f9fab
--- /dev/null
+++ b/app/pages/components/product-category-section.wrn
@@ -0,0 +1,31 @@
+page ProductCategorySectioncomponent {
+  seo {
+    title = "ProductCategorySection component"
+    description = "Reusable product category section component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProductCategorySection</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ProductCategorySection</h1><p>Reusable product category section component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProductCategorySection eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProductCategorySection&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProductCategorySection.wrn</code></p><pre data-language="wrn"><code>component ProductCategorySection &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/product-cta.wrn b/app/pages/components/product-cta.wrn
new file mode 100644
index 00000000..25225e57
--- /dev/null
+++ b/app/pages/components/product-cta.wrn
@@ -0,0 +1,32 @@
+page ProductCTAcomponent {
+  seo {
+    title = "ProductCTA component"
+    description = "Reusable product c t a component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProductCTA</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>ProductCTA</h1><p>Reusable product c t a component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProductCTA label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProductCTA&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProductCTA.wrn</code></p><pre data-language="wrn"><code>component ProductCTA &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/product-feature-list.wrn b/app/pages/components/product-feature-list.wrn
new file mode 100644
index 00000000..5d05596c
--- /dev/null
+++ b/app/pages/components/product-feature-list.wrn
@@ -0,0 +1,31 @@
+page ProductFeatureListcomponent {
+  seo {
+    title = "ProductFeatureList component"
+    description = "Reusable product feature list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProductFeatureList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ProductFeatureList</h1><p>Reusable product feature list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProductFeatureList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProductFeatureList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProductFeatureList.wrn</code></p><pre data-language="wrn"><code>component ProductFeatureList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/product-grid.wrn b/app/pages/components/product-grid.wrn
new file mode 100644
index 00000000..efefc2ac
--- /dev/null
+++ b/app/pages/components/product-grid.wrn
@@ -0,0 +1,31 @@
+page ProductGridcomponent {
+  seo {
+    title = "ProductGrid component"
+    description = "Reusable product grid component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProductGrid</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ProductGrid</h1><p>Reusable product grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProductGrid title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProductGrid&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProductGrid.wrn</code></p><pre data-language="wrn"><code>component ProductGrid &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/product-hero.wrn b/app/pages/components/product-hero.wrn
new file mode 100644
index 00000000..65503ac8
--- /dev/null
+++ b/app/pages/components/product-hero.wrn
@@ -0,0 +1,31 @@
+page ProductHerocomponent {
+  seo {
+    title = "ProductHero component"
+    description = "Reusable product hero component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProductHero</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ProductHero</h1><p>Reusable product hero component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProductHero eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProductHero&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProductHero.wrn</code></p><pre data-language="wrn"><code>component ProductHero &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/product-icon.wrn b/app/pages/components/product-icon.wrn
new file mode 100644
index 00000000..ea0a054b
--- /dev/null
+++ b/app/pages/components/product-icon.wrn
@@ -0,0 +1,34 @@
+page ProductIconcomponent {
+  seo {
+    title = "ProductIcon component"
+    description = "Reusable product icon component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProductIcon</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ProductIcon</h1><p>Reusable product icon component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProductIcon eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProductIcon&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProductIcon.wrn</code></p><pre data-language="wrn"><code>component ProductIcon &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/product-integration-list.wrn b/app/pages/components/product-integration-list.wrn
new file mode 100644
index 00000000..f05cd979
--- /dev/null
+++ b/app/pages/components/product-integration-list.wrn
@@ -0,0 +1,31 @@
+page ProductIntegrationListcomponent {
+  seo {
+    title = "ProductIntegrationList component"
+    description = "Reusable product integration list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProductIntegrationList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ProductIntegrationList</h1><p>Reusable product integration list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProductIntegrationList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProductIntegrationList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProductIntegrationList.wrn</code></p><pre data-language="wrn"><code>component ProductIntegrationList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/product-list.wrn b/app/pages/components/product-list.wrn
new file mode 100644
index 00000000..a8e9b257
--- /dev/null
+++ b/app/pages/components/product-list.wrn
@@ -0,0 +1,31 @@
+page ProductListcomponent {
+  seo {
+    title = "ProductList component"
+    description = "Reusable product list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProductList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ProductList</h1><p>Reusable product list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProductList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProductList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProductList.wrn</code></p><pre data-language="wrn"><code>component ProductList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/product-logo.wrn b/app/pages/components/product-logo.wrn
new file mode 100644
index 00000000..2bd25679
--- /dev/null
+++ b/app/pages/components/product-logo.wrn
@@ -0,0 +1,34 @@
+page ProductLogocomponent {
+  seo {
+    title = "ProductLogo component"
+    description = "Reusable product logo component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProductLogo</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ProductLogo</h1><p>Reusable product logo component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProductLogo eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProductLogo&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProductLogo.wrn</code></p><pre data-language="wrn"><code>component ProductLogo &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/product-mega-menu.wrn b/app/pages/components/product-mega-menu.wrn
new file mode 100644
index 00000000..bd3fe49f
--- /dev/null
+++ b/app/pages/components/product-mega-menu.wrn
@@ -0,0 +1,353 @@
+page ProductMegaMenucomponent {
+  seo {
+    title = "ProductMegaMenu component"
+    description = "Reusable product mega menu component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProductMegaMenu</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>ProductMegaMenu</h1><p>Reusable product mega menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProductMegaMenu /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProductMegaMenu&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProductMegaMenu.wrn</code></p><pre data-language="wrn"><code>component ProductMegaMenu &#123;
+    props &#123;
+        class: string = &quot;&quot;
+    &#125;
+    view &#123;
+        &lt;div
+            class=&quot;border-t border-slate-200 bg-white shadow-2xl shadow-slate-950/10 dark:border-white/10 dark:bg-slate-950 dark:shadow-black/30 &#123;class&#125;&quot;
+        &gt;
+            &lt;div class=&quot;mx-auto max-w-7xl px-6 py-8 lg:px-10&quot;&gt;
+                &lt;div class=&quot;grid gap-8 lg:grid-cols-[minmax(0,1.65fr)_minmax(18rem,0.7fr)]&quot;&gt;
+
+                    &lt;!-- Main product links --&gt;
+                    &lt;div&gt;
+                        &lt;div class=&quot;mb-5 flex items-end justify-between gap-6&quot;&gt;
+                            &lt;div&gt;
+                                &lt;p class=&quot;text-xs font-semibold uppercase tracking-[0.16em] text-indigo-600 dark:text-indigo-400&quot;&gt;
+                                    WRNexusJS platform
+                                &lt;/p&gt;
+
+                                &lt;h2 class=&quot;mt-2 text-lg font-bold tracking-tight text-slate-950 dark:text-white&quot;&gt;
+                                    Everything you need to manage identity
+                                &lt;/h2&gt;
+                            &lt;/div&gt;
+
+                            &lt;a
+                                href=&quot;/product&quot;
+                                class=&quot;group hidden items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 xl:inline-flex&quot;
+                            &gt;
+                                View all features
+
+                                &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/a&gt;
+                        &lt;/div&gt;
+
+                        &lt;div class=&quot;grid gap-2 md:grid-cols-2&quot;&gt;
+
+                            &lt;!-- Platform --&gt;
+                            &lt;a
+                                href=&quot;/platform&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-indigo-200 hover:bg-indigo-50 dark:hover:border-indigo-500/20 dark:hover:bg-indigo-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-indigo-100 text-indigo-700 transition group-hover:bg-indigo-600 group-hover:text-white dark:bg-indigo-500/15 dark:text-indigo-300 dark:group-hover:bg-indigo-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--layers-3] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            Platform
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-indigo-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-indigo-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Unified identity infrastructure for every application.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;!-- Authentication --&gt;
+                            &lt;a
+                                href=&quot;/authentication&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-violet-200 hover:bg-violet-50 dark:hover:border-violet-500/20 dark:hover:bg-violet-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-violet-100 text-violet-700 transition group-hover:bg-violet-600 group-hover:text-white dark:bg-violet-500/15 dark:text-violet-300 dark:group-hover:bg-violet-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--fingerprint] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            Authentication
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-violet-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-violet-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Passwords, passkeys, social login, MFA, and SSO.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;!-- User management --&gt;
+                            &lt;a
+                                href=&quot;/user-management&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-cyan-200 hover:bg-cyan-50 dark:hover:border-cyan-500/20 dark:hover:bg-cyan-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-cyan-100 text-cyan-700 transition group-hover:bg-cyan-600 group-hover:text-white dark:bg-cyan-500/15 dark:text-cyan-300 dark:group-hover:bg-cyan-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--users-round] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            User management
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-cyan-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-cyan-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Profiles, sessions, invitations, and user lifecycle.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;!-- Organizations --&gt;
+                            &lt;a
+                                href=&quot;/organizations&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-emerald-200 hover:bg-emerald-50 dark:hover:border-emerald-500/20 dark:hover:bg-emerald-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-emerald-100 text-emerald-700 transition group-hover:bg-emerald-600 group-hover:text-white dark:bg-emerald-500/15 dark:text-emerald-300 dark:group-hover:bg-emerald-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--building-2] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            Organizations
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-emerald-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-emerald-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Multi-tenant workspaces, teams, domains, and membership.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;!-- Authorization --&gt;
+                            &lt;a
+                                href=&quot;/authorization&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-amber-200 hover:bg-amber-50 dark:hover:border-amber-500/20 dark:hover:bg-amber-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-amber-100 text-amber-700 transition group-hover:bg-amber-600 group-hover:text-white dark:bg-amber-500/15 dark:text-amber-300 dark:group-hover:bg-amber-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--key-square] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            Authorization
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-amber-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-amber-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Roles, permissions, policies, and protected resources.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;!-- Security --&gt;
+                            &lt;a
+                                href=&quot;/security&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-rose-200 hover:bg-rose-50 dark:hover:border-rose-500/20 dark:hover:bg-rose-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-rose-100 text-rose-700 transition group-hover:bg-rose-600 group-hover:text-white dark:bg-rose-500/15 dark:text-rose-300 dark:group-hover:bg-rose-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--shield-check] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            Security
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-rose-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-rose-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Session controls, recovery, audit logs, and threat protection.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+                        &lt;/div&gt;
+
+                        &lt;a
+                            href=&quot;/product&quot;
+                            class=&quot;mt-4 flex items-center justify-center gap-2 rounded-xl border border-indigo-200 bg-indigo-50 px-4 py-3 text-sm font-semibold text-indigo-700 transition hover:border-indigo-300 hover:bg-indigo-100 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/15 xl:hidden&quot;
+                        &gt;
+                            View all product features
+
+                            &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                        &lt;/a&gt;
+                    &lt;/div&gt;
+
+                    &lt;!-- Featured panel --&gt;
+                    &lt;aside
+                        class=&quot;relative overflow-hidden rounded-3xl border border-indigo-200 bg-linear-to-br from-indigo-50 via-white to-violet-50 p-6 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10&quot;
+                    &gt;
+                        &lt;div aria-hidden=&quot;true&quot; class=&quot;absolute -right-16 -top-16 h-40 w-40 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10&quot; &gt;&lt;/div&gt;
+
+                        &lt;div aria-hidden=&quot;true&quot; class=&quot;absolute -bottom-20 -left-16 h-40 w-40 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10&quot; &gt;&lt;/div&gt;
+
+                        &lt;div class=&quot;relative&quot;&gt;
+                            &lt;span
+                                class=&quot;inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-white/80 px-3 py-1.5 text-xs font-semibold text-indigo-700 backdrop-blur-sm dark:border-indigo-500/20 dark:bg-white/5 dark:text-indigo-300&quot;
+                            &gt;
+                                &lt;span class=&quot;icon-[lucide--sparkles] h-3.5 w-3.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                Featured
+                            &lt;/span&gt;
+
+                            &lt;div
+                                class=&quot;mt-5 grid h-12 w-12 place-items-center rounded-2xl bg-indigo-600 text-white shadow-lg shadow-indigo-600/20&quot;
+                            &gt;
+                                &lt;span class=&quot;icon-[lucide--shield-user] h-6 w-6&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/div&gt;
+
+                            &lt;h3 class=&quot;mt-5 text-xl font-bold tracking-tight text-slate-950 dark:text-white&quot;&gt;
+                                Identity built for modern SaaS
+                            &lt;/h3&gt;
+
+                            &lt;p class=&quot;mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400&quot;&gt;
+                                Add secure authentication, organizations, permissions, and user
+                                management without rebuilding identity infrastructure.
+                            &lt;/p&gt;
+
+                            &lt;ul class=&quot;mt-5 space-y-3&quot;&gt;
+                                &lt;li class=&quot;flex items-center gap-3 text-sm text-slate-700 dark:text-slate-300&quot;&gt;
+                                    &lt;span
+                                        class=&quot;grid h-6 w-6 shrink-0 place-items-center rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300&quot;
+                                    &gt;
+                                        &lt;span class=&quot;icon-[lucide--check] h-3.5 w-3.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    Passkeys and multifactor authentication
+                                &lt;/li&gt;
+
+                                &lt;li class=&quot;flex items-center gap-3 text-sm text-slate-700 dark:text-slate-300&quot;&gt;
+                                    &lt;span
+                                        class=&quot;grid h-6 w-6 shrink-0 place-items-center rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300&quot;
+                                    &gt;
+                                        &lt;span class=&quot;icon-[lucide--check] h-3.5 w-3.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    Organizations and workspace isolation
+                                &lt;/li&gt;
+
+                                &lt;li class=&quot;flex items-center gap-3 text-sm text-slate-700 dark:text-slate-300&quot;&gt;
+                                    &lt;span
+                                        class=&quot;grid h-6 w-6 shrink-0 place-items-center rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300&quot;
+                                    &gt;
+                                        &lt;span class=&quot;icon-[lucide--check] h-3.5 w-3.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    APIs and SDKs for every stack
+                                &lt;/li&gt;
+                            &lt;/ul&gt;
+
+                            &lt;a
+                                href=&quot;/solutions/saas&quot;
+                                class=&quot;group mt-6 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900&quot;
+                            &gt;
+                                Explore SaaS identity
+
+                                &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;div class=&quot;mt-4 flex items-center justify-center gap-2 text-xs text-slate-500 dark:text-slate-400&quot;&gt;
+                                &lt;span class=&quot;icon-[lucide--code-2] h-4 w-4 text-indigo-600 dark:text-indigo-400&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                Developer-first and API-ready
+                            &lt;/div&gt;
+                        &lt;/div&gt;
+                    &lt;/aside&gt;
+
+                &lt;/div&gt;
+
+                &lt;!-- Bottom quick links --&gt;
+                &lt;div
+                    class=&quot;mt-7 flex flex-wrap items-center justify-between gap-4 border-t border-slate-200 pt-5 dark:border-white/10&quot;
+                &gt;
+                    &lt;div class=&quot;flex flex-wrap items-center gap-x-6 gap-y-3&quot;&gt;
+                        &lt;a
+                            href=&quot;/integrations&quot;
+                            class=&quot;inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300&quot;
+                        &gt;
+                            &lt;span class=&quot;icon-[lucide--plug] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                            Integrations
+                        &lt;/a&gt;
+
+                        &lt;a
+                            href=&quot;/enterprise-sso&quot;
+                            class=&quot;inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300&quot;
+                        &gt;
+                            &lt;span class=&quot;icon-[lucide--building-2] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                            Enterprise SSO
+                        &lt;/a&gt;
+
+                        &lt;a
+                            href=&quot;/audit-logs&quot;
+                            class=&quot;inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300&quot;
+                        &gt;
+                            &lt;span class=&quot;icon-[lucide--scroll-text] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                            Audit logs
+                        &lt;/a&gt;
+                    &lt;/div&gt;
+
+                    &lt;a
+                        href=&quot;/docs&quot;
+                        class=&quot;group inline-flex items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300&quot;
+                    &gt;
+                        Read the documentation
+
+                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/a&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/product-mini-card.wrn b/app/pages/components/product-mini-card.wrn
new file mode 100644
index 00000000..fdaed0f8
--- /dev/null
+++ b/app/pages/components/product-mini-card.wrn
@@ -0,0 +1,34 @@
+page ProductMiniCardcomponent {
+  seo {
+    title = "ProductMiniCard component"
+    description = "Reusable product mini card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProductMiniCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ProductMiniCard</h1><p>Reusable product mini card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProductMiniCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProductMiniCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProductMiniCard.wrn</code></p><pre data-language="wrn"><code>component ProductMiniCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/product-navigation-card.wrn b/app/pages/components/product-navigation-card.wrn
new file mode 100644
index 00000000..87cef3f6
--- /dev/null
+++ b/app/pages/components/product-navigation-card.wrn
@@ -0,0 +1,34 @@
+page ProductNavigationCardcomponent {
+  seo {
+    title = "ProductNavigationCard component"
+    description = "Reusable product navigation card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProductNavigationCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ProductNavigationCard</h1><p>Reusable product navigation card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProductNavigationCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProductNavigationCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProductNavigationCard.wrn</code></p><pre data-language="wrn"><code>component ProductNavigationCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/product-page-shell.wrn b/app/pages/components/product-page-shell.wrn
new file mode 100644
index 00000000..0f5a4bec
--- /dev/null
+++ b/app/pages/components/product-page-shell.wrn
@@ -0,0 +1,27 @@
+page ProductPageShellcomponent {
+  seo {
+    title = "ProductPageShell component"
+    description = "Reusable product page shell component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProductPageShell</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ProductPageShell</h1><p>Reusable product page shell component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProductPageShell /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProductPageShell&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProductPageShell.wrn</code></p><pre data-language="wrn"><code>component ProductPageShell &#123;
+  props &#123;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-page-shell wire-page-shell--product &#123;class&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/product-selector.wrn b/app/pages/components/product-selector.wrn
new file mode 100644
index 00000000..5ae8437a
--- /dev/null
+++ b/app/pages/components/product-selector.wrn
@@ -0,0 +1,37 @@
+page ProductSelectorcomponent {
+  seo {
+    title = "ProductSelector component"
+    description = "Reusable product selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProductSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ProductSelector</h1><p>Reusable product selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProductSelector label=&quot;Product&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProductSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Product&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProductSelector.wrn</code></p><pre data-language="wrn"><code>component ProductSelector &#123;
+  props &#123;
+    label = &quot;Product&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/product-status-badge.wrn b/app/pages/components/product-status-badge.wrn
new file mode 100644
index 00000000..419452ad
--- /dev/null
+++ b/app/pages/components/product-status-badge.wrn
@@ -0,0 +1,29 @@
+page ProductStatusBadgecomponent {
+  seo {
+    title = "ProductStatusBadge component"
+    description = "Reusable product status badge component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProductStatusBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>ProductStatusBadge</h1><p>Reusable product status badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProductStatusBadge label=&quot;ProductStatus&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProductStatusBadge&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;ProductStatus&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProductStatusBadge.wrn</code></p><pre data-language="wrn"><code>component ProductStatusBadge &#123;
+  props &#123;
+    label = &quot;ProductStatus&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-badge wire-badge--&#123;variant&#125; wire-catalog-badge wire-catalog-badge--productstatusbadge &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/product-use-case-list.wrn b/app/pages/components/product-use-case-list.wrn
new file mode 100644
index 00000000..a0735cd6
--- /dev/null
+++ b/app/pages/components/product-use-case-list.wrn
@@ -0,0 +1,31 @@
+page ProductUseCaseListcomponent {
+  seo {
+    title = "ProductUseCaseList component"
+    description = "Reusable product use case list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProductUseCaseList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ProductUseCaseList</h1><p>Reusable product use case list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProductUseCaseList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProductUseCaseList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProductUseCaseList.wrn</code></p><pre data-language="wrn"><code>component ProductUseCaseList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/products-mega-menu.wrn b/app/pages/components/products-mega-menu.wrn
new file mode 100644
index 00000000..b23532ee
--- /dev/null
+++ b/app/pages/components/products-mega-menu.wrn
@@ -0,0 +1,29 @@
+page ProductsMegaMenucomponent {
+  seo {
+    title = "ProductsMegaMenu component"
+    description = "Reusable products mega menu component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProductsMegaMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>ProductsMegaMenu</h1><p>Reusable products mega menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProductsMegaMenu label=&quot;Products&quot; sections=&quot;[]&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProductsMegaMenu&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Products&quot;</code></td></tr><tr><td><code>sections</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProductsMegaMenu.wrn</code></p><pre data-language="wrn"><code>component ProductsMegaMenu &#123;
+  props &#123;
+    label = &quot;Products&quot;
+    sections = []
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;MegaMenu label=&quot;&#123;label&#125;&quot; sections=&quot;&#123;sections&#125;&quot; class=&quot;&#123;class&#125;&quot; /&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/progress-bar.wrn b/app/pages/components/progress-bar.wrn
new file mode 100644
index 00000000..b5edc1dc
--- /dev/null
+++ b/app/pages/components/progress-bar.wrn
@@ -0,0 +1,33 @@
+page ProgressBarcomponent {
+  seo {
+    title = "ProgressBar component"
+    description = "Reusable progress bar component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProgressBar</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>ProgressBar</h1><p>Reusable progress bar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProgressBar value=&quot;0&quot; max=&quot;100&quot; label=&quot;Progress&quot; showValue=&quot;true&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProgressBar&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>max</code></td><td><code>number</code></td><td>Optional</td><td><code>100</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Progress&quot;</code></td></tr><tr><td><code>showValue</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProgressBar.wrn</code></p><pre data-language="wrn"><code>component ProgressBar &#123;
+  props &#123;
+    class = &quot;&quot;
+    value = 0
+    max = 100
+    label = &quot;Progress&quot;
+    showValue = true
+  &#125;
+  view &#123;
+    &lt;div class=&quot;&#123;class&#125;&quot;&gt;&lt;div class=&quot;mb-2 flex justify-between text-sm&quot;&gt;&lt;span&gt;&#123;label&#125;&lt;/span&gt;&lt;span data-show=&quot;showValue&quot;&gt;&#123;value&#125;%&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;h-2 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-800&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;&#123;value&#125;&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;&#123;max&#125;&quot;&gt;&lt;div class=&quot;h-full rounded-full bg-violet-600 transition-all duration-500&quot; style=&quot;width: &#123;value&#125;%&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/progress-chart.wrn b/app/pages/components/progress-chart.wrn
new file mode 100644
index 00000000..a5ac5d54
--- /dev/null
+++ b/app/pages/components/progress-chart.wrn
@@ -0,0 +1,32 @@
+page ProgressChartcomponent {
+  seo {
+    title = "ProgressChart component"
+    description = "Reusable progress chart component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProgressChart</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>ProgressChart</h1><p>Reusable progress chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProgressChart title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProgressChart&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProgressChart.wrn</code></p><pre data-language="wrn"><code>component ProgressChart &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/progress-ring.wrn b/app/pages/components/progress-ring.wrn
new file mode 100644
index 00000000..f793be4d
--- /dev/null
+++ b/app/pages/components/progress-ring.wrn
@@ -0,0 +1,32 @@
+page ProgressRingcomponent {
+  seo {
+    title = "ProgressRing component"
+    description = "Reusable progress ring component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProgressRing</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>ProgressRing</h1><p>Reusable progress ring component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProgressRing title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProgressRing&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProgressRing.wrn</code></p><pre data-language="wrn"><code>component ProgressRing &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/progress-slider.wrn b/app/pages/components/progress-slider.wrn
new file mode 100644
index 00000000..4d79e237
--- /dev/null
+++ b/app/pages/components/progress-slider.wrn
@@ -0,0 +1,34 @@
+page ProgressSlidercomponent {
+  seo {
+    title = "ProgressSlider component"
+    description = "Reusable progress slider component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProgressSlider</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ProgressSlider</h1><p>Reusable progress slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProgressSlider eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProgressSlider&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProgressSlider.wrn</code></p><pre data-language="wrn"><code>component ProgressSlider &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/progress.wrn b/app/pages/components/progress.wrn
new file mode 100644
index 00000000..89519339
--- /dev/null
+++ b/app/pages/components/progress.wrn
@@ -0,0 +1,32 @@
+page progresscomponent {
+  seo {
+    title = "progress component"
+    description = "Reusable progress component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">progress</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>progress</h1><p>Reusable progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;progress value=&quot;0&quot; max=&quot;100&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;progress&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>value</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>max</code></td><td><code>number</code></td><td>Optional</td><td><code>100</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/progress.wrn</code></p><pre data-language="wrn"><code>// Progress bar (native &lt;progress&gt;, themed).
+component Progress &#123;
+  props &#123;
+    value = 0
+    max = 100
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;progress class=&quot;wire-progress &#123;class&#125;&quot; value=&quot;&#123;value&#125;&quot; max=&quot;&#123;max&#125;&quot;&gt;&lt;/progress&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/project-card.wrn b/app/pages/components/project-card.wrn
new file mode 100644
index 00000000..f3c1dc2f
--- /dev/null
+++ b/app/pages/components/project-card.wrn
@@ -0,0 +1,30 @@
+page ProjectCardcomponent {
+  seo {
+    title = "ProjectCard component"
+    description = "Reusable project card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProjectCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ProjectCard</h1><p>Reusable project card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProjectCard title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProjectCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProjectCard.wrn</code></p><pre data-language="wrn"><code>component ProjectCard &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card wire-catalog-card--project &#123;class&#125;&quot;&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-catalog-card__link&quot;&gt;&lt;span class=&quot;wire-visually-hidden&quot;&gt;Open &#123;title&#125;&lt;/span&gt;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/project-selector.wrn b/app/pages/components/project-selector.wrn
new file mode 100644
index 00000000..4f7e0d73
--- /dev/null
+++ b/app/pages/components/project-selector.wrn
@@ -0,0 +1,37 @@
+page ProjectSelectorcomponent {
+  seo {
+    title = "ProjectSelector component"
+    description = "Reusable project selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProjectSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ProjectSelector</h1><p>Reusable project selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProjectSelector label=&quot;Project&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProjectSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Project&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProjectSelector.wrn</code></p><pre data-language="wrn"><code>component ProjectSelector &#123;
+  props &#123;
+    label = &quot;Project&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/project-switcher.wrn b/app/pages/components/project-switcher.wrn
new file mode 100644
index 00000000..e1b3fcfa
--- /dev/null
+++ b/app/pages/components/project-switcher.wrn
@@ -0,0 +1,34 @@
+page ProjectSwitchercomponent {
+  seo {
+    title = "ProjectSwitcher component"
+    description = "Reusable project switcher component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProjectSwitcher</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ProjectSwitcher</h1><p>Reusable project switcher component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProjectSwitcher eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProjectSwitcher&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProjectSwitcher.wrn</code></p><pre data-language="wrn"><code>component ProjectSwitcher &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/promo-code-input.wrn b/app/pages/components/promo-code-input.wrn
new file mode 100644
index 00000000..b0d6fa95
--- /dev/null
+++ b/app/pages/components/promo-code-input.wrn
@@ -0,0 +1,37 @@
+page PromoCodeInputcomponent {
+  seo {
+    title = "PromoCodeInput component"
+    description = "Reusable promo code input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PromoCodeInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>PromoCodeInput</h1><p>Reusable promo code input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PromoCodeInput label=&quot;PromoCode&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PromoCodeInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;PromoCode&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PromoCodeInput.wrn</code></p><pre data-language="wrn"><code>component PromoCodeInput &#123;
+  props &#123;
+    label = &quot;PromoCode&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/prompt-dialog.wrn b/app/pages/components/prompt-dialog.wrn
new file mode 100644
index 00000000..b1010f14
--- /dev/null
+++ b/app/pages/components/prompt-dialog.wrn
@@ -0,0 +1,31 @@
+page PromptDialogcomponent {
+  seo {
+    title = "PromptDialog component"
+    description = "Reusable prompt dialog component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PromptDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>PromptDialog</h1><p>Reusable prompt dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PromptDialog title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PromptDialog&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PromptDialog.wrn</code></p><pre data-language="wrn"><code>component PromptDialog &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/provider-selector.wrn b/app/pages/components/provider-selector.wrn
new file mode 100644
index 00000000..fdf768b6
--- /dev/null
+++ b/app/pages/components/provider-selector.wrn
@@ -0,0 +1,37 @@
+page ProviderSelectorcomponent {
+  seo {
+    title = "ProviderSelector component"
+    description = "Reusable provider selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ProviderSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ProviderSelector</h1><p>Reusable provider selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ProviderSelector label=&quot;Provider&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ProviderSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Provider&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ProviderSelector.wrn</code></p><pre data-language="wrn"><code>component ProviderSelector &#123;
+  props &#123;
+    label = &quot;Provider&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/public-footer.wrn b/app/pages/components/public-footer.wrn
new file mode 100644
index 00000000..73631429
--- /dev/null
+++ b/app/pages/components/public-footer.wrn
@@ -0,0 +1,629 @@
+page PublicFootercomponent {
+  seo {
+    title = "PublicFooter component"
+    description = "Reusable public footer component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PublicFooter</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>PublicFooter</h1><p>Reusable public footer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>0 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PublicFooter /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PublicFooter&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>submit</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PublicFooter.wrn</code></p><pre data-language="wrn"><code>component PublicFooter &#123;
+    props &#123;
+        class: string = &quot;&quot;
+    &#125;
+    state email = &quot;&quot;
+    state newsletterSubmitted = false
+
+    view &#123;
+        &lt;footer
+            class=&quot;relative overflow-hidden border-t border-slate-200 bg-slate-50 dark:border-white/10 dark:bg-slate-950 &#123;class&#125;&quot;
+        &gt;
+
+            &lt;!-- Decorative background --&gt;
+            &lt;div
+                aria-hidden=&quot;true&quot;
+                class=&quot;pointer-events-none absolute inset-x-0 top-0 h-96 overflow-hidden&quot;
+            &gt;
+                &lt;div class=&quot;absolute -left-32 -top-48 h-96 w-96 rounded-full bg-indigo-300/20 blur-3xl dark:bg-indigo-500/10&quot;&gt;&lt;/div&gt;
+
+                &lt;div class=&quot;absolute -right-32 -top-48 h-96 w-96 rounded-full bg-violet-300/20 blur-3xl dark:bg-violet-500/10&quot;&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div class=&quot;relative w-full px-5 py-12 sm:px-8 lg:px-10 lg:py-16 xl:px-12&quot;&gt;
+
+                &lt;!-- Newsletter and CTA --&gt;
+                &lt;section
+                    aria-labelledby=&quot;footer-newsletter-title&quot;
+                    class=&quot;relative overflow-hidden rounded-3xl border border-indigo-200 bg-linear-to-br from-indigo-50 via-white to-violet-50 p-6 shadow-xl shadow-indigo-950/5 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10 sm:p-8 lg:p-10&quot;
+                &gt;
+                    &lt;div aria-hidden=&quot;true&quot; class=&quot;absolute -right-24 -top-24 h-64 w-64 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10&quot; &gt;&lt;/div&gt;
+
+                    &lt;div aria-hidden=&quot;true&quot; class=&quot;absolute -bottom-24 -left-24 h-64 w-64 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10&quot; &gt;&lt;/div&gt;
+
+                    &lt;div class=&quot;relative grid items-center gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,0.75fr)]&quot;&gt;
+                        &lt;div&gt;
+                            &lt;span
+                                class=&quot;inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-white/70 px-3 py-1.5 text-xs font-semibold text-indigo-700 backdrop-blur-sm dark:border-indigo-500/20 dark:bg-white/5 dark:text-indigo-300&quot;
+                            &gt;
+                                &lt;span class=&quot;icon-[lucide--mail-plus] h-3.5 w-3.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                WRNexusJS updates
+                            &lt;/span&gt;
+
+                            &lt;h2
+                                id=&quot;footer-newsletter-title&quot;
+                                class=&quot;mt-5 max-w-2xl text-2xl font-bold tracking-tight text-slate-950 dark:text-white sm:text-3xl&quot;
+                            &gt;
+                                Identity insights delivered to your inbox
+                            &lt;/h2&gt;
+
+                            &lt;p class=&quot;mt-3 max-w-2xl text-sm leading-6 text-slate-600 dark:text-slate-400 sm:text-base&quot;&gt;
+                                Get product updates, security guidance, implementation
+                                strategies, and practical identity architecture resources.
+                            &lt;/p&gt;
+                        &lt;/div&gt;
+
+                        &lt;div&gt;
+                            &lt;form
+                                method=&quot;post&quot;
+                                action=&quot;/api/newsletter/subscribe&quot;
+                                @submit=&quot;newsletterSubmitted = true&quot;
+                                class=&quot;rounded-2xl border border-slate-200 bg-white/80 p-2 shadow-lg shadow-slate-950/5 backdrop-blur-sm dark:border-white/10 dark:bg-white/5&quot;
+                            &gt;
+                                &lt;div class=&quot;flex flex-col gap-2 sm:flex-row&quot;&gt;
+                                    &lt;label
+                                        class=&quot;sr-only&quot;
+                                        for=&quot;footer-newsletter-email&quot;
+                                    &gt;
+                                        Work email address
+                                    &lt;/label&gt;
+
+                                    &lt;div class=&quot;relative min-w-0 flex-1&quot;&gt;
+                                        &lt;span class=&quot;icon-[lucide--mail] pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                        &lt;input
+                                            id=&quot;footer-newsletter-email&quot;
+                                            name=&quot;email&quot;
+                                            type=&quot;email&quot;
+                                            autocomplete=&quot;email&quot;
+                                            required
+                                            bind:value=&quot;email&quot;
+                                            placeholder=&quot;Enter your work email&quot;
+                                            class=&quot;h-12 w-full rounded-xl border border-transparent bg-transparent pl-11 pr-4 text-sm text-slate-950 outline-none transition placeholder:text-slate-400 focus:border-indigo-300 focus:bg-white focus:ring-4 focus:ring-indigo-500/10 dark:text-white dark:focus:border-indigo-500/30 dark:focus:bg-slate-900&quot;
+                                        /&gt;
+                                    &lt;/div&gt;
+
+                                    &lt;button
+                                        type=&quot;submit&quot;
+                                        class=&quot;group inline-flex h-12 shrink-0 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900&quot;
+                                    &gt;
+                                        Subscribe
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/button&gt;
+                                &lt;/div&gt;
+                            &lt;/form&gt;
+
+                            &lt;p class=&quot;mt-3 flex items-start gap-2 text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                &lt;span class=&quot;icon-[lucide--shield-check] mt-0.5 h-3.5 w-3.5 shrink-0&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                No spam. Unsubscribe at any time. Read our
+                                &lt;a
+                                    href=&quot;/privacy&quot;
+                                    class=&quot;font-semibold text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300&quot;
+                                &gt;
+                                    privacy policy
+                                &lt;/a&gt;.
+                            &lt;/p&gt;
+
+                            &lt;div
+                                data-show=&quot;newsletterSubmitted&quot;
+                                role=&quot;status&quot;
+                                class=&quot;mt-3 flex items-center gap-2 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2.5 text-sm font-medium text-emerald-800 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300&quot;
+                            &gt;
+                                &lt;span class=&quot;icon-[lucide--circle-check] h-4 w-4 shrink-0&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                Thanks. Please check your inbox to confirm your subscription.
+                            &lt;/div&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/section&gt;
+
+                &lt;!-- Main footer --&gt;
+                &lt;div class=&quot;mt-12 grid gap-10 lg:grid-cols-[minmax(16rem,1.25fr)_minmax(0,3fr)] lg:gap-16&quot;&gt;
+
+                    &lt;!-- Brand --&gt;
+                    &lt;div&gt;
+                        &lt;a
+                            href=&quot;/&quot;
+                            aria-label=&quot;WRNexusJS home&quot;
+                            class=&quot;group inline-flex items-center gap-3 rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500&quot;
+                        &gt;
+                            &lt;span
+                                class=&quot;grid h-11 w-11 place-items-center rounded-2xl bg-indigo-600 text-white shadow-lg shadow-indigo-600/20 transition group-hover:-translate-y-0.5 group-hover:bg-indigo-500&quot;
+                            &gt;
+                                &lt;span class=&quot;icon-[lucide--blocks] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/span&gt;
+
+                            &lt;span&gt;
+                                &lt;span class=&quot;block text-lg font-bold tracking-tight text-slate-950 dark:text-white&quot;&gt;
+                                    WRNexusJS
+                                &lt;/span&gt;
+
+                                &lt;span
+                                    class=&quot;block text-[10px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400&quot;
+                                &gt;
+                                    Identity Cloud
+                                &lt;/span&gt;
+                            &lt;/span&gt;
+                        &lt;/a&gt;
+
+                        &lt;p class=&quot;mt-5 max-w-sm text-sm leading-6 text-slate-600 dark:text-slate-400&quot;&gt;
+                            Secure authentication, user management, organizations,
+                            authorization, and enterprise identity for modern applications.
+                        &lt;/p&gt;
+
+                        &lt;div class=&quot;mt-6 flex flex-wrap items-center gap-2&quot;&gt;
+                            &lt;a
+                                href=&quot;/status&quot;
+                                class=&quot;inline-flex items-center gap-2 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-semibold text-emerald-800 transition hover:border-emerald-300 hover:bg-emerald-100 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300 dark:hover:border-emerald-500/30&quot;
+                            &gt;
+                                &lt;span class=&quot;relative flex h-2 w-2&quot;&gt;
+                                    &lt;span class=&quot;absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60&quot;&gt;&lt;/span&gt;
+                                    &lt;span class=&quot;relative inline-flex h-2 w-2 rounded-full bg-emerald-500&quot;&gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                All systems operational
+                            &lt;/a&gt;
+                        &lt;/div&gt;
+
+                        &lt;!-- Social links --&gt;
+                        &lt;div class=&quot;mt-6 flex items-center gap-2&quot;&gt;
+                            &lt;a
+                                href=&quot;https://github.com/wrnexus&quot;
+                                target=&quot;_blank&quot;
+                                rel=&quot;noopener noreferrer&quot;
+                                aria-label=&quot;WRNexusJS on GitHub&quot;
+                                class=&quot;grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300&quot;
+                            &gt;
+                                &lt;span class=&quot;icon-[lucide--github] h-4.5 w-4.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;a
+                                href=&quot;https://www.linkedin.com/company/wrnexus&quot;
+                                target=&quot;_blank&quot;
+                                rel=&quot;noopener noreferrer&quot;
+                                aria-label=&quot;WRNexusJS on LinkedIn&quot;
+                                class=&quot;grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300&quot;
+                            &gt;
+                                &lt;span class=&quot;icon-[lucide--linkedin] h-4.5 w-4.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;a
+                                href=&quot;https://x.com/wrnexus&quot;
+                                target=&quot;_blank&quot;
+                                rel=&quot;noopener noreferrer&quot;
+                                aria-label=&quot;WRNexusJS on X&quot;
+                                class=&quot;grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300&quot;
+                            &gt;
+                                &lt;span class=&quot;icon-[lucide--twitter] h-4.5 w-4.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;a
+                                href=&quot;https://www.youtube.com/@wrnexus&quot;
+                                target=&quot;_blank&quot;
+                                rel=&quot;noopener noreferrer&quot;
+                                aria-label=&quot;WRNexusJS on YouTube&quot;
+                                class=&quot;grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300&quot;
+                            &gt;
+                                &lt;span class=&quot;icon-[lucide--youtube] h-4.5 w-4.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/a&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+
+                    &lt;!-- Navigation columns --&gt;
+                    &lt;nav
+                        aria-label=&quot;Footer navigation&quot;
+                        class=&quot;grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-3 xl:grid-cols-5&quot;
+                    &gt;
+                        &lt;!-- Product --&gt;
+                        &lt;div&gt;
+                            &lt;h3 class=&quot;text-sm font-bold text-slate-950 dark:text-white&quot;&gt;
+                                Product
+                            &lt;/h3&gt;
+
+                            &lt;ul class=&quot;mt-4 space-y-3&quot;&gt;
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/platform&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Platform
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/authentication&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Authentication
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/user-management&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        User management
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/organizations&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Organizations
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/authorization&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Authorization
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/enterprise-sso&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Enterprise SSO
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+                            &lt;/ul&gt;
+                        &lt;/div&gt;
+
+                        &lt;!-- Solutions --&gt;
+                        &lt;div&gt;
+                            &lt;h3 class=&quot;text-sm font-bold text-slate-950 dark:text-white&quot;&gt;
+                                Solutions
+                            &lt;/h3&gt;
+
+                            &lt;ul class=&quot;mt-4 space-y-3&quot;&gt;
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/solutions/startups&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Startups
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/solutions/saas&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        SaaS
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/solutions/enterprise&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Enterprise
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/solutions/developers&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Developers
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/solutions/agencies&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Agencies
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/solutions/b2b&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        B2B
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+                            &lt;/ul&gt;
+                        &lt;/div&gt;
+
+                        &lt;!-- Developers --&gt;
+                        &lt;div&gt;
+                            &lt;h3 class=&quot;text-sm font-bold text-slate-950 dark:text-white&quot;&gt;
+                                Developers
+                            &lt;/h3&gt;
+
+                            &lt;ul class=&quot;mt-4 space-y-3&quot;&gt;
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/docs&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Documentation
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/docs/api&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        API reference
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/sdks&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        SDKs
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/examples&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Examples
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/docs/webhooks&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Webhooks
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/changelog&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Changelog
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+                            &lt;/ul&gt;
+                        &lt;/div&gt;
+
+                        &lt;!-- Resources --&gt;
+                        &lt;div&gt;
+                            &lt;h3 class=&quot;text-sm font-bold text-slate-950 dark:text-white&quot;&gt;
+                                Resources
+                            &lt;/h3&gt;
+
+                            &lt;ul class=&quot;mt-4 space-y-3&quot;&gt;
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/blog&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Blog
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/guides&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Guides
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/customers&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Customers
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/help&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Help center
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/security&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Security
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/trust&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Trust center
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+                            &lt;/ul&gt;
+                        &lt;/div&gt;
+
+                        &lt;!-- Company --&gt;
+                        &lt;div&gt;
+                            &lt;h3 class=&quot;text-sm font-bold text-slate-950 dark:text-white&quot;&gt;
+                                Company
+                            &lt;/h3&gt;
+
+                            &lt;ul class=&quot;mt-4 space-y-3&quot;&gt;
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/about&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        About
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/careers&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Careers
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/partners&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Partners
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/contact&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Contact
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/pricing&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Pricing
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+
+                                &lt;li&gt;
+                                    &lt;a
+                                        href=&quot;/status&quot;
+                                        class=&quot;footer-link&quot;
+                                    &gt;
+                                        Status
+                                    &lt;/a&gt;
+                                &lt;/li&gt;
+                            &lt;/ul&gt;
+                        &lt;/div&gt;
+                    &lt;/nav&gt;
+                &lt;/div&gt;
+
+                &lt;!-- Bottom bar --&gt;
+                &lt;div
+                    class=&quot;mt-12 flex flex-col gap-5 border-t border-slate-200 pt-6 dark:border-white/10 lg:flex-row lg:items-center lg:justify-between&quot;
+                &gt;
+                    &lt;div
+                        class=&quot;flex flex-col gap-2 text-xs text-slate-500 dark:text-slate-400 sm:flex-row sm:items-center sm:gap-4&quot;
+                    &gt;
+                        &lt;p&gt;
+                            © 2026 WRNexusJS. All rights reserved.
+                        &lt;/p&gt;
+
+                        &lt;span class=&quot;hidden h-1 w-1 rounded-full bg-slate-300 dark:bg-slate-700 sm:block&quot;&gt;&lt;/span&gt;
+
+                        &lt;p&gt;
+                            Built by WorkRoot Workspace.
+                        &lt;/p&gt;
+                    &lt;/div&gt;
+
+                    &lt;div class=&quot;flex flex-wrap items-center gap-x-5 gap-y-3&quot;&gt;
+                        &lt;a
+                            href=&quot;/privacy&quot;
+                            class=&quot;footer-bottom-link&quot;
+                        &gt;
+                            Privacy
+                        &lt;/a&gt;
+
+                        &lt;a
+                            href=&quot;/terms&quot;
+                            class=&quot;footer-bottom-link&quot;
+                        &gt;
+                            Terms
+                        &lt;/a&gt;
+
+                        &lt;a
+                            href=&quot;/cookies&quot;
+                            class=&quot;footer-bottom-link&quot;
+                        &gt;
+                            Cookies
+                        &lt;/a&gt;
+
+                        &lt;a
+                            href=&quot;/legal&quot;
+                            class=&quot;footer-bottom-link&quot;
+                        &gt;
+                            Legal
+                        &lt;/a&gt;
+
+                        &lt;button
+                            type=&quot;button&quot;
+                            data-open-cookie-preferences
+                            class=&quot;footer-bottom-link&quot;
+                        &gt;
+                            Cookie preferences
+                        &lt;/button&gt;
+
+                        &lt;button
+                            type=&quot;button&quot;
+                            data-wire-theme-toggle
+                            class=&quot;inline-flex items-center gap-2 rounded-lg text-xs font-semibold text-slate-500 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300&quot;
+                        &gt;
+                            &lt;span class=&quot;icon-[lucide--moon] h-3.5 w-3.5 dark:hidden&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                            &lt;span class=&quot;icon-[lucide--sun] hidden h-3.5 w-3.5 dark:block&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                            Theme
+                        &lt;/button&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/footer&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/public-header-logo.wrn b/app/pages/components/public-header-logo.wrn
new file mode 100644
index 00000000..5d17631b
--- /dev/null
+++ b/app/pages/components/public-header-logo.wrn
@@ -0,0 +1,34 @@
+page PublicHeaderLogocomponent {
+  seo {
+    title = "PublicHeaderLogo component"
+    description = "Reusable public header logo component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PublicHeaderLogo</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>PublicHeaderLogo</h1><p>Reusable public header logo component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PublicHeaderLogo eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PublicHeaderLogo&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PublicHeaderLogo.wrn</code></p><pre data-language="wrn"><code>component PublicHeaderLogo &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/public-header.wrn b/app/pages/components/public-header.wrn
new file mode 100644
index 00000000..8a050c03
--- /dev/null
+++ b/app/pages/components/public-header.wrn
@@ -0,0 +1,305 @@
+page PublicHeadercomponent {
+  seo {
+    title = "PublicHeader component"
+    description = "Reusable public header component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PublicHeader</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>PublicHeader</h1><p>Reusable public header component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>0 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PublicHeader /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PublicHeader&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PublicHeader.wrn</code></p><pre data-language="wrn"><code>component PublicHeader &#123;
+    props &#123;
+        class: string = &quot;&quot;
+    &#125;
+    state activeMenu = &quot;&quot;
+    state mobileMenuOpen = false
+    state headerScrolled = false
+
+    view &#123;
+        &lt;header
+            data-public-header
+            class=&quot;relative sticky top-0 z-50 w-full border-b transition-all duration-300 &#123;class&#125;&quot;
+            class:border-transparent=&quot;!headerScrolled&quot;
+            class:bg-transparent=&quot;!headerScrolled&quot;
+            class:border-slate-200/80=&quot;headerScrolled&quot;
+            class:bg-white/90=&quot;headerScrolled&quot;
+            class:shadow-sm=&quot;headerScrolled&quot;
+            class:backdrop-blur-xl=&quot;headerScrolled&quot;
+            class:dark:border-white/10=&quot;headerScrolled&quot;
+            class:dark:bg-slate-950/90=&quot;headerScrolled&quot;
+        &gt;
+            &lt;div
+                class=&quot;relative z-[60] flex h-18 w-full items-center justify-between gap-6 px-5 sm:px-8 lg:px-10 xl:px-12&quot;
+            &gt;
+
+                &lt;!-- Brand --&gt;
+                &lt;a
+                    href=&quot;/&quot;
+                    aria-label=&quot;WRNexusJS home&quot;
+                    class=&quot;group inline-flex shrink-0 items-center gap-3 rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950&quot;
+                &gt;
+                    &lt;span
+                        class=&quot;grid h-10 w-10 place-items-center rounded-xl bg-indigo-600 text-white shadow-lg shadow-indigo-600/20 transition duration-200 group-hover:-translate-y-0.5 group-hover:bg-indigo-500 group-hover:shadow-xl&quot;
+                    &gt;
+                        &lt;span class=&quot;icon-[lucide--blocks] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/span&gt;
+
+                    &lt;span class=&quot;min-w-0&quot;&gt;
+                        &lt;span class=&quot;block text-lg font-bold tracking-tight text-slate-950 dark:text-white&quot;&gt;
+                            WRNexusJS
+                        &lt;/span&gt;
+
+                        &lt;span
+                            class=&quot;block text-[10px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400&quot;
+                        &gt;
+                            Identity Cloud
+                        &lt;/span&gt;
+                    &lt;/span&gt;
+                &lt;/a&gt;
+
+                &lt;!-- Desktop navigation --&gt;
+                &lt;nav
+                    aria-label=&quot;Main navigation&quot;
+                    class=&quot;hidden items-center gap-1 lg:flex&quot;
+                &gt;
+                    &lt;!-- Product --&gt;
+                    &lt;button
+                        type=&quot;button&quot;
+                        @click=&quot;activeMenu = activeMenu === 'product' ? '' : 'product'&quot;
+                        aria-haspopup=&quot;true&quot;
+                        aria-expanded=&quot;&#123;activeMenu === 'product'&#125;&quot;
+                        class=&quot;inline-flex h-10 items-center gap-1.5 rounded-xl px-3.5 text-sm font-semibold transition&quot;
+                        class:bg-indigo-50=&quot;activeMenu === 'product'&quot;
+                        class:text-indigo-700=&quot;activeMenu === 'product'&quot;
+                        class:text-slate-700=&quot;activeMenu !== 'product'&quot;
+                        class:hover:bg-slate-100=&quot;activeMenu !== 'product'&quot;
+                        class:dark:bg-indigo-500/10=&quot;activeMenu === 'product'&quot;
+                        class:dark:text-indigo-300=&quot;activeMenu === 'product'&quot;
+                        class:dark:text-slate-300=&quot;activeMenu !== 'product'&quot;
+                        class:dark:hover:bg-white/5=&quot;activeMenu !== 'product'&quot;
+                    &gt;
+                        Product
+
+                        &lt;span class=&quot;icon-[lucide--chevron-down] h-4 w-4 transition-transform duration-200&quot; class:rotate-180=&quot;activeMenu === 'product'&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/button&gt;
+
+                    &lt;!-- Solutions --&gt;
+                    &lt;button
+                        type=&quot;button&quot;
+                        @click=&quot;activeMenu = activeMenu === 'solutions' ? '' : 'solutions'&quot;
+                        aria-haspopup=&quot;true&quot;
+                        aria-expanded=&quot;&#123;activeMenu === 'solutions'&#125;&quot;
+                        class=&quot;group inline-flex h-10 items-center gap-1.5 rounded-xl px-3.5 text-sm font-semibold transition&quot;
+                        class:bg-indigo-50=&quot;activeMenu === 'solutions'&quot;
+                        class:text-indigo-700=&quot;activeMenu === 'solutions'&quot;
+                        class:text-slate-700=&quot;activeMenu !== 'solutions'&quot;
+                        class:hover:bg-slate-100=&quot;activeMenu !== 'solutions'&quot;
+                        class:hover:text-slate-950=&quot;activeMenu !== 'solutions'&quot;
+                        class:dark:bg-indigo-500/10=&quot;activeMenu === 'solutions'&quot;
+                        class:dark:text-indigo-300=&quot;activeMenu === 'solutions'&quot;
+                        class:dark:text-slate-300=&quot;activeMenu !== 'solutions'&quot;
+                        class:dark:hover:bg-white/5=&quot;activeMenu !== 'solutions'&quot;
+                        class:dark:hover:text-white=&quot;activeMenu !== 'solutions'&quot;
+                    &gt;
+                        Solutions
+
+                        &lt;span class=&quot;icon-[lucide--chevron-down] h-4 w-4 transition-transform duration-200&quot; class:rotate-180=&quot;activeMenu === 'solutions'&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/button&gt;
+
+                    &lt;!-- Developers --&gt;
+                    &lt;button
+                        type=&quot;button&quot;
+                        @click=&quot;activeMenu = activeMenu === 'developers' ? '' : 'developers'&quot;
+                        aria-haspopup=&quot;true&quot;
+                        aria-expanded=&quot;&#123;activeMenu === 'developers'&#125;&quot;
+                        class=&quot;group inline-flex h-10 items-center gap-1.5 rounded-xl px-3.5 text-sm font-semibold transition&quot;
+                        class:bg-indigo-50=&quot;activeMenu === 'developers'&quot;
+                        class:text-indigo-700=&quot;activeMenu === 'developers'&quot;
+                        class:text-slate-700=&quot;activeMenu !== 'developers'&quot;
+                        class:hover:bg-slate-100=&quot;activeMenu !== 'developers'&quot;
+                        class:hover:text-slate-950=&quot;activeMenu !== 'developers'&quot;
+                        class:dark:bg-indigo-500/10=&quot;activeMenu === 'developers'&quot;
+                        class:dark:text-indigo-300=&quot;activeMenu === 'developers'&quot;
+                        class:dark:text-slate-300=&quot;activeMenu !== 'developers'&quot;
+                        class:dark:hover:bg-white/5=&quot;activeMenu !== 'developers'&quot;
+                        class:dark:hover:text-white=&quot;activeMenu !== 'developers'&quot;
+                    &gt;
+                        Developers
+
+                        &lt;span class=&quot;icon-[lucide--chevron-down] h-4 w-4 transition-transform duration-200&quot; class:rotate-180=&quot;activeMenu === 'developers'&quot;  aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/button&gt;
+
+                    &lt;!-- Resources --&gt;
+                    &lt;button
+                        type=&quot;button&quot;
+                        @click=&quot;activeMenu = activeMenu === 'resources' ? '' : 'resources'&quot;
+                        aria-haspopup=&quot;true&quot;
+                        aria-expanded=&quot;&#123;activeMenu === 'resources'&#125;&quot;
+                        class=&quot;group inline-flex h-10 items-center gap-1.5 rounded-xl px-3.5 text-sm font-semibold transition&quot;
+                        class:bg-indigo-50=&quot;activeMenu === 'resources'&quot;
+                        class:text-indigo-700=&quot;activeMenu === 'resources'&quot;
+                        class:text-slate-700=&quot;activeMenu !== 'resources'&quot;
+                        class:hover:bg-slate-100=&quot;activeMenu !== 'resources'&quot;
+                        class:hover:text-slate-950=&quot;activeMenu !== 'resources'&quot;
+                        class:dark:bg-indigo-500/10=&quot;activeMenu === 'resources'&quot;
+                        class:dark:text-indigo-300=&quot;activeMenu === 'resources'&quot;
+                        class:dark:text-slate-300=&quot;activeMenu !== 'resources'&quot;
+                        class:dark:hover:bg-white/5=&quot;activeMenu !== 'resources'&quot;
+                        class:dark:hover:text-white=&quot;activeMenu !== 'resources'&quot;
+                    &gt;
+                        Resources
+
+                        &lt;span class=&quot;icon-[lucide--chevron-down] h-4 w-4 transition-transform duration-200&quot; class:rotate-180=&quot;activeMenu === 'resources'&quot;  aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/button&gt;
+
+                    &lt;a
+                        href=&quot;/pricing&quot;
+                        class=&quot;inline-flex h-10 items-center rounded-xl px-3.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-300 dark:hover:bg-white/5 dark:hover:text-white&quot;
+                    &gt;
+                        Pricing
+                    &lt;/a&gt;
+                &lt;/nav&gt;
+
+                &lt;!-- Desktop actions --&gt;
+                &lt;div class=&quot;hidden items-center gap-2 lg:flex&quot;&gt;
+                    &lt;a
+                        href=&quot;/status&quot;
+                        class=&quot;mr-1 inline-flex items-center gap-2 rounded-xl px-3 py-2 text-xs font-semibold text-slate-500 transition hover:bg-slate-100 hover:text-slate-950 dark:text-slate-400 dark:hover:bg-white/5 dark:hover:text-white&quot;
+                    &gt;
+                        &lt;span class=&quot;relative flex h-2 w-2&quot;&gt;
+                            &lt;span class=&quot;absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60&quot;&gt;&lt;/span&gt;
+                            &lt;span class=&quot;relative inline-flex h-2 w-2 rounded-full bg-emerald-500&quot;&gt;&lt;/span&gt;
+                        &lt;/span&gt;
+
+                        All systems operational
+                    &lt;/a&gt;
+
+                    &lt;button
+                        type=&quot;button&quot;
+                        data-wire-theme-toggle
+                        aria-label=&quot;Toggle color theme&quot;
+                        title=&quot;Toggle color theme&quot;
+                        class=&quot;grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-600 shadow-sm transition hover:border-slate-300 hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-300 dark:hover:border-white/20 dark:hover:bg-white/10 dark:hover:text-white&quot;
+                    &gt;
+                        &lt;span class=&quot;icon-[lucide--moon] h-4 w-4 dark:hidden&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                        &lt;span class=&quot;icon-[lucide--sun] hidden h-4 w-4 dark:block&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                        &lt;span class=&quot;sr-only&quot;&gt;
+                            Toggle color theme
+                        &lt;/span&gt;
+                    &lt;/button&gt;
+
+                    &lt;a
+                        href=&quot;/sign-in&quot;
+                        class=&quot;inline-flex h-10 items-center justify-center rounded-xl px-4 text-sm font-semibold text-slate-700 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-200 dark:hover:bg-white/5 dark:hover:text-white&quot;
+                    &gt;
+                        Sign in
+                    &lt;/a&gt;
+
+                    &lt;a
+                        href=&quot;/sign-up&quot;
+                        class=&quot;group inline-flex h-10 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950&quot;
+                    &gt;
+                        Start free
+
+                        &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-0.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/a&gt;
+                &lt;/div&gt;
+
+                &lt;!-- Mobile actions --&gt;
+                &lt;div class=&quot;flex items-center gap-2 lg:hidden&quot;&gt;
+                    &lt;button
+                        type=&quot;button&quot;
+                        data-wire-theme-toggle
+                        aria-label=&quot;Toggle color theme&quot;
+                        title=&quot;Toggle color theme&quot;
+                        class=&quot;grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-600 shadow-sm transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-300 dark:hover:bg-white/10 dark:hover:text-white&quot;
+                    &gt;
+                        &lt;span class=&quot;icon-[lucide--moon] h-4 w-4 dark:hidden&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                        &lt;span class=&quot;icon-[lucide--sun] hidden h-4 w-4 dark:block&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/button&gt;
+
+                    &lt;button
+                        type=&quot;button&quot;
+                        @click=&quot;mobileMenuOpen = !mobileMenuOpen&quot;
+                        aria-label=&quot;&#123;mobileMenuOpen ? 'Close navigation menu' : 'Open navigation menu'&#125;&quot;
+                        aria-expanded=&quot;&#123;mobileMenuOpen&#125;&quot;
+                        aria-controls=&quot;public-mobile-navigation&quot;
+                        class=&quot;grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10 dark:hover:text-white&quot;
+                    &gt;
+                        &lt;span data-show=&quot;!mobileMenuOpen&quot; class=&quot;icon-[lucide--menu] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                        &lt;span data-show=&quot;mobileMenuOpen&quot; class=&quot;icon-[lucide--x] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                        &lt;span class=&quot;sr-only&quot;&gt;
+                            Toggle navigation
+                        &lt;/span&gt;
+                    &lt;/button&gt;
+                &lt;/div&gt;
+
+            &lt;/div&gt;
+
+            &lt;!-- Outside-click backdrop --&gt;
+            &lt;button type=&quot;button&quot; data-show=&quot;activeMenu !== ''&quot; @click=&quot;activeMenu = ''&quot; aria-label=&quot;Close navigation menu&quot; class=&quot;fixed inset-0 z-40 hidden cursor-default bg-transparent lg:block&quot; class:hidden=&quot;activeMenu === ''&quot; class:block=&quot;activeMenu !== ''&quot; &gt;&lt;/button&gt;
+
+            &lt;!-- Desktop mega menus --&gt;
+            &lt;div
+                class=&quot;absolute inset-x-0 top-full z-50 max-lg:hidden&quot;
+                class:hidden=&quot;activeMenu === ''&quot;
+                class:block=&quot;activeMenu !== ''&quot;
+            &gt;
+                &lt;div
+                    class:hidden=&quot;activeMenu !== 'product'&quot;
+                    class:block=&quot;activeMenu === 'product'&quot;
+                &gt;
+                    &lt;ProductMegaMenu /&gt;
+                &lt;/div&gt;
+
+                &lt;div
+                    class:hidden=&quot;activeMenu !== 'solutions'&quot;
+                    class:block=&quot;activeMenu === 'solutions'&quot;
+                &gt;
+                    &lt;SolutionsMegaMenu /&gt;
+                &lt;/div&gt;
+
+                &lt;div
+                    class:hidden=&quot;activeMenu !== 'developers'&quot;
+                    class:block=&quot;activeMenu === 'developers'&quot;
+                &gt;
+                    &lt;DevelopersMegaMenu /&gt;
+                &lt;/div&gt;
+
+                &lt;div
+                    class:hidden=&quot;activeMenu !== 'resources'&quot;
+                    class:block=&quot;activeMenu === 'resources'&quot;
+                &gt;
+                    &lt;ResourcesMegaMenu /&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- Mobile navigation --&gt;
+            &lt;div
+                id=&quot;public-mobile-navigation&quot;
+                class=&quot;lg:hidden&quot;
+                class:hidden=&quot;!mobileMenuOpen&quot;
+                class:block=&quot;mobileMenuOpen&quot;
+            &gt;
+                &lt;PublicMobileNavigation /&gt;
+            &lt;/div&gt;
+        &lt;/header&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/public-mobile-navigation.wrn b/app/pages/components/public-mobile-navigation.wrn
new file mode 100644
index 00000000..b800ed23
--- /dev/null
+++ b/app/pages/components/public-mobile-navigation.wrn
@@ -0,0 +1,610 @@
+page PublicMobileNavigationcomponent {
+  seo {
+    title = "PublicMobileNavigation component"
+    description = "Reusable public mobile navigation component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PublicMobileNavigation</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>PublicMobileNavigation</h1><p>Reusable public mobile navigation component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>0 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PublicMobileNavigation /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PublicMobileNavigation&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PublicMobileNavigation.wrn</code></p><pre data-language="wrn"><code>component PublicMobileNavigation &#123;
+    props &#123;
+        class: string = &quot;&quot;
+    &#125;
+    state openSection = &quot;&quot;
+
+    view &#123;
+        &lt;div
+            class=&quot;border-t border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-slate-950 lg:hidden &#123;class&#125;&quot;
+        &gt;
+            &lt;div class=&quot;mx-auto max-h-[calc(100dvh-4.5rem)] max-w-7xl overflow-y-auto px-5 py-5 sm:px-8&quot;&gt;
+
+                &lt;!-- Mobile status --&gt;
+                &lt;a
+                    href=&quot;/status&quot;
+                    class=&quot;mb-5 flex items-center justify-between rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 transition hover:border-emerald-300 hover:bg-emerald-100 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:hover:border-emerald-500/30 dark:hover:bg-emerald-500/15&quot;
+                &gt;
+                    &lt;span class=&quot;flex items-center gap-3&quot;&gt;
+                        &lt;span class=&quot;relative flex h-2.5 w-2.5 shrink-0&quot;&gt;
+                            &lt;span class=&quot;absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60&quot;&gt;&lt;/span&gt;
+                            &lt;span class=&quot;relative inline-flex h-2.5 w-2.5 rounded-full bg-emerald-500&quot;&gt;&lt;/span&gt;
+                        &lt;/span&gt;
+
+                        &lt;span&gt;
+                            &lt;span class=&quot;block text-sm font-semibold text-emerald-900 dark:text-emerald-100&quot;&gt;
+                                All systems operational
+                            &lt;/span&gt;
+
+                            &lt;span class=&quot;mt-0.5 block text-xs text-emerald-700 dark:text-emerald-300&quot;&gt;
+                                View service status
+                            &lt;/span&gt;
+                        &lt;/span&gt;
+                    &lt;/span&gt;
+
+                    &lt;span class=&quot;icon-[lucide--arrow-up-right] h-4 w-4 shrink-0 text-emerald-700 dark:text-emerald-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                &lt;/a&gt;
+
+                &lt;nav
+                    aria-label=&quot;Mobile navigation&quot;
+                    class=&quot;space-y-2&quot;
+                &gt;
+
+                    &lt;!-- Product --&gt;
+                    &lt;div
+                        class=&quot;overflow-hidden rounded-2xl border border-slate-200 bg-white dark:border-white/10 dark:bg-white/5&quot;
+                    &gt;
+                        &lt;button
+                            type=&quot;button&quot;
+                            @click=&quot;openSection = openSection === 'product' ? '' : 'product'&quot;
+                            aria-expanded=&quot;&#123;openSection === 'product'&#125;&quot;
+                            aria-controls=&quot;mobile-product-menu&quot;
+                            class=&quot;flex w-full items-center justify-between gap-4 px-4 py-4 text-left transition hover:bg-slate-50 dark:hover:bg-white/5&quot;
+                            class:bg-indigo-50=&quot;openSection === 'product'&quot;
+                            class:dark:bg-indigo-500/10=&quot;openSection === 'product'&quot;
+                        &gt;
+                            &lt;span class=&quot;flex items-center gap-3&quot;&gt;
+                                &lt;span
+                                    class=&quot;grid h-10 w-10 shrink-0 place-items-center rounded-xl transition&quot;
+                                    class:bg-indigo-100=&quot;openSection === 'product'&quot;
+                                    class:text-indigo-700=&quot;openSection === 'product'&quot;
+                                    class:bg-slate-100=&quot;openSection !== 'product'&quot;
+                                    class:text-slate-600=&quot;openSection !== 'product'&quot;
+                                    class:dark:bg-indigo-500/15=&quot;openSection === 'product'&quot;
+                                    class:dark:text-indigo-300=&quot;openSection === 'product'&quot;
+                                    class:dark:bg-white/5=&quot;openSection !== 'product'&quot;
+                                    class:dark:text-slate-300=&quot;openSection !== 'product'&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--boxes] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span&gt;
+                                    &lt;span
+                                        class=&quot;block text-sm font-semibold&quot;
+                                        class:text-indigo-950=&quot;openSection === 'product'&quot;
+                                        class:text-slate-950=&quot;openSection !== 'product'&quot;
+                                        class:dark:text-indigo-100=&quot;openSection === 'product'&quot;
+                                        class:dark:text-white=&quot;openSection !== 'product'&quot;
+                                    &gt;
+                                        Product
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-0.5 block text-xs text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Explore the WRNexusJS platform
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/span&gt;
+
+                            &lt;span class=&quot;icon-[lucide--chevron-down] h-5 w-5 shrink-0 text-slate-400 transition-transform duration-200&quot; class:rotate-180=&quot;openSection === 'product'&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                        &lt;/button&gt;
+
+                        &lt;div
+                            id=&quot;mobile-product-menu&quot;
+                            data-show=&quot;openSection === 'product'&quot;
+                            class=&quot;border-t border-slate-200 px-3 py-3 dark:border-white/10&quot;
+                        &gt;
+                            &lt;div class=&quot;grid gap-1&quot;&gt;
+                                &lt;a
+                                    href=&quot;/platform&quot;
+                                    class=&quot;group flex items-start gap-3 rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5&quot;
+                                &gt;
+                                    &lt;span
+                                        class=&quot;grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-indigo-50 text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-300&quot;
+                                    &gt;
+                                        &lt;span class=&quot;icon-[lucide--layers-3] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span&gt;
+                                        &lt;span
+                                            class=&quot;block text-sm font-semibold text-slate-900 group-hover:text-indigo-700 dark:text-white dark:group-hover:text-indigo-300&quot;
+                                        &gt;
+                                            Platform
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;mt-0.5 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                            Complete identity infrastructure
+                                        &lt;/span&gt;
+                                    &lt;/span&gt;
+                                &lt;/a&gt;
+
+                                &lt;a
+                                    href=&quot;/authentication&quot;
+                                    class=&quot;group flex items-start gap-3 rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5&quot;
+                                &gt;
+                                    &lt;span
+                                        class=&quot;grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-violet-50 text-violet-700 dark:bg-violet-500/10 dark:text-violet-300&quot;
+                                    &gt;
+                                        &lt;span class=&quot;icon-[lucide--fingerprint] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span&gt;
+                                        &lt;span
+                                            class=&quot;block text-sm font-semibold text-slate-900 group-hover:text-indigo-700 dark:text-white dark:group-hover:text-indigo-300&quot;
+                                        &gt;
+                                            Authentication
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;mt-0.5 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                            Passwords, passkeys, social login, and SSO
+                                        &lt;/span&gt;
+                                    &lt;/span&gt;
+                                &lt;/a&gt;
+
+                                &lt;a
+                                    href=&quot;/user-management&quot;
+                                    class=&quot;group flex items-start gap-3 rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5&quot;
+                                &gt;
+                                    &lt;span
+                                        class=&quot;grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-cyan-50 text-cyan-700 dark:bg-cyan-500/10 dark:text-cyan-300&quot;
+                                    &gt;
+                                        &lt;span class=&quot;icon-[lucide--users-round] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span&gt;
+                                        &lt;span
+                                            class=&quot;block text-sm font-semibold text-slate-900 group-hover:text-indigo-700 dark:text-white dark:group-hover:text-indigo-300&quot;
+                                        &gt;
+                                            User management
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;mt-0.5 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                            Profiles, sessions, invitations, and lifecycle
+                                        &lt;/span&gt;
+                                    &lt;/span&gt;
+                                &lt;/a&gt;
+
+                                &lt;a
+                                    href=&quot;/organizations&quot;
+                                    class=&quot;group flex items-start gap-3 rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5&quot;
+                                &gt;
+                                    &lt;span
+                                        class=&quot;grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300&quot;
+                                    &gt;
+                                        &lt;span class=&quot;icon-[lucide--building-2] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span&gt;
+                                        &lt;span
+                                            class=&quot;block text-sm font-semibold text-slate-900 group-hover:text-indigo-700 dark:text-white dark:group-hover:text-indigo-300&quot;
+                                        &gt;
+                                            Organizations
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;mt-0.5 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                            Multi-tenant workspaces and teams
+                                        &lt;/span&gt;
+                                    &lt;/span&gt;
+                                &lt;/a&gt;
+
+                                &lt;a
+                                    href=&quot;/security&quot;
+                                    class=&quot;group flex items-start gap-3 rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5&quot;
+                                &gt;
+                                    &lt;span
+                                        class=&quot;grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-amber-50 text-amber-700 dark:bg-amber-500/10 dark:text-amber-300&quot;
+                                    &gt;
+                                        &lt;span class=&quot;icon-[lucide--shield-check] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span&gt;
+                                        &lt;span
+                                            class=&quot;block text-sm font-semibold text-slate-900 group-hover:text-indigo-700 dark:text-white dark:group-hover:text-indigo-300&quot;
+                                        &gt;
+                                            Security
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;mt-0.5 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                            Protect identities and sensitive actions
+                                        &lt;/span&gt;
+                                    &lt;/span&gt;
+                                &lt;/a&gt;
+
+                                &lt;a
+                                    href=&quot;/integrations&quot;
+                                    class=&quot;group flex items-start gap-3 rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5&quot;
+                                &gt;
+                                    &lt;span
+                                        class=&quot;grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-rose-50 text-rose-700 dark:bg-rose-500/10 dark:text-rose-300&quot;
+                                    &gt;
+                                        &lt;span class=&quot;icon-[lucide--plug] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span&gt;
+                                        &lt;span
+                                            class=&quot;block text-sm font-semibold text-slate-900 group-hover:text-indigo-700 dark:text-white dark:group-hover:text-indigo-300&quot;
+                                        &gt;
+                                            Integrations
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;mt-0.5 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                            Connect your stack and applications
+                                        &lt;/span&gt;
+                                    &lt;/span&gt;
+                                &lt;/a&gt;
+                            &lt;/div&gt;
+
+                            &lt;a
+                                href=&quot;/product&quot;
+                                class=&quot;mt-2 flex items-center justify-center gap-2 rounded-xl bg-indigo-50 px-4 py-3 text-sm font-semibold text-indigo-700 transition hover:bg-indigo-100 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:bg-indigo-500/15&quot;
+                            &gt;
+                                View all product features
+
+                                &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/a&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+
+                    &lt;!-- Solutions --&gt;
+                    &lt;div
+                        class=&quot;overflow-hidden rounded-2xl border border-slate-200 bg-white dark:border-white/10 dark:bg-white/5&quot;
+                    &gt;
+                        &lt;button
+                            type=&quot;button&quot;
+                            @click=&quot;openSection = openSection === 'solutions' ? '' : 'solutions'&quot;
+                            aria-expanded=&quot;&#123;openSection === 'solutions'&#125;&quot;
+                            aria-controls=&quot;mobile-solutions-menu&quot;
+                            class=&quot;flex w-full items-center justify-between gap-4 px-4 py-4 text-left transition hover:bg-slate-50 dark:hover:bg-white/5&quot;
+                            class:bg-indigo-50=&quot;openSection === 'solutions'&quot;
+                            class:dark:bg-indigo-500/10=&quot;openSection === 'solutions'&quot;
+                        &gt;
+                            &lt;span class=&quot;flex items-center gap-3&quot;&gt;
+                                &lt;span
+                                    class=&quot;grid h-10 w-10 shrink-0 place-items-center rounded-xl transition&quot;
+                                    class:bg-indigo-100=&quot;openSection === 'solutions'&quot;
+                                    class:text-indigo-700=&quot;openSection === 'solutions'&quot;
+                                    class:bg-slate-100=&quot;openSection !== 'solutions'&quot;
+                                    class:text-slate-600=&quot;openSection !== 'solutions'&quot;
+                                    class:dark:bg-indigo-500/15=&quot;openSection === 'solutions'&quot;
+                                    class:dark:text-indigo-300=&quot;openSection === 'solutions'&quot;
+                                    class:dark:bg-white/5=&quot;openSection !== 'solutions'&quot;
+                                    class:dark:text-slate-300=&quot;openSection !== 'solutions'&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--lightbulb] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span&gt;
+                                    &lt;span class=&quot;block text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                        Solutions
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-0.5 block text-xs text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Built for your business
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/span&gt;
+
+                            &lt;span class=&quot;icon-[lucide--chevron-down] h-5 w-5 shrink-0 text-slate-400 transition-transform duration-200&quot; class:rotate-180=&quot;openSection === 'solutions'&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                        &lt;/button&gt;
+
+                        &lt;div
+                            id=&quot;mobile-solutions-menu&quot;
+                            data-show=&quot;openSection === 'solutions'&quot;
+                            class=&quot;border-t border-slate-200 px-3 py-3 dark:border-white/10&quot;
+                        &gt;
+                            &lt;div class=&quot;grid grid-cols-2 gap-2&quot;&gt;
+                                &lt;a
+                                    href=&quot;/solutions/startups&quot;
+                                    class=&quot;rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--rocket] h-5 w-5 text-indigo-600 dark:text-indigo-400&quot;&gt;&lt;/span&gt;
+                                    &lt;span class=&quot;mt-2 block text-sm font-semibold text-slate-900 dark:text-white&quot;&gt;
+                                        Startups
+                                    &lt;/span&gt;
+                                &lt;/a&gt;
+
+                                &lt;a
+                                    href=&quot;/solutions/saas&quot;
+                                    class=&quot;rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--cloud] h-5 w-5 text-cyan-600 dark:text-cyan-400&quot;&gt;&lt;/span&gt;
+                                    &lt;span class=&quot;mt-2 block text-sm font-semibold text-slate-900 dark:text-white&quot;&gt;
+                                        SaaS
+                                    &lt;/span&gt;
+                                &lt;/a&gt;
+
+                                &lt;a
+                                    href=&quot;/solutions/enterprise&quot;
+                                    class=&quot;rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--building] h-5 w-5 text-violet-600 dark:text-violet-400&quot;&gt;&lt;/span&gt;
+                                    &lt;span class=&quot;mt-2 block text-sm font-semibold text-slate-900 dark:text-white&quot;&gt;
+                                        Enterprise
+                                    &lt;/span&gt;
+                                &lt;/a&gt;
+
+                                &lt;a
+                                    href=&quot;/solutions/developers&quot;
+                                    class=&quot;rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--code-2] h-5 w-5 text-emerald-600 dark:text-emerald-400&quot;&gt;&lt;/span&gt;
+                                    &lt;span class=&quot;mt-2 block text-sm font-semibold text-slate-900 dark:text-white&quot;&gt;
+                                        Developers
+                                    &lt;/span&gt;
+                                &lt;/a&gt;
+
+                                &lt;a
+                                    href=&quot;/solutions/agencies&quot;
+                                    class=&quot;rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--briefcase-business] h-5 w-5 text-amber-600 dark:text-amber-400&quot;&gt;&lt;/span&gt;
+                                    &lt;span class=&quot;mt-2 block text-sm font-semibold text-slate-900 dark:text-white&quot;&gt;
+                                        Agencies
+                                    &lt;/span&gt;
+                                &lt;/a&gt;
+
+                                &lt;a
+                                    href=&quot;/solutions/b2b&quot;
+                                    class=&quot;rounded-xl px-3 py-3 transition hover:bg-slate-100 dark:hover:bg-white/5&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--handshake] h-5 w-5 text-rose-600 dark:text-rose-400&quot;&gt;&lt;/span&gt;
+                                    &lt;span class=&quot;mt-2 block text-sm font-semibold text-slate-900 dark:text-white&quot;&gt;
+                                        B2B
+                                    &lt;/span&gt;
+                                &lt;/a&gt;
+                            &lt;/div&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+
+                    &lt;!-- Developers --&gt;
+                    &lt;div
+                        class=&quot;overflow-hidden rounded-2xl border border-slate-200 bg-white dark:border-white/10 dark:bg-white/5&quot;
+                    &gt;
+                        &lt;button
+                            type=&quot;button&quot;
+                            @click=&quot;openSection = openSection === 'developers' ? '' : 'developers'&quot;
+                            aria-expanded=&quot;&#123;openSection === 'developers'&#125;&quot;
+                            aria-controls=&quot;mobile-developers-menu&quot;
+                            class=&quot;flex w-full items-center justify-between gap-4 px-4 py-4 text-left transition hover:bg-slate-50 dark:hover:bg-white/5&quot;
+                            class:bg-indigo-50=&quot;openSection === 'developers'&quot;
+                            class:dark:bg-indigo-500/10=&quot;openSection === 'developers'&quot;
+                        &gt;
+                            &lt;span class=&quot;flex items-center gap-3&quot;&gt;
+                                &lt;span
+                                    class=&quot;grid h-10 w-10 shrink-0 place-items-center rounded-xl transition&quot;
+                                    class:bg-indigo-100=&quot;openSection === 'developers'&quot;
+                                    class:text-indigo-700=&quot;openSection === 'developers'&quot;
+                                    class:bg-slate-100=&quot;openSection !== 'developers'&quot;
+                                    class:text-slate-600=&quot;openSection !== 'developers'&quot;
+                                    class:dark:bg-indigo-500/15=&quot;openSection === 'developers'&quot;
+                                    class:dark:text-indigo-300=&quot;openSection === 'developers'&quot;
+                                    class:dark:bg-white/5=&quot;openSection !== 'developers'&quot;
+                                    class:dark:text-slate-300=&quot;openSection !== 'developers'&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--terminal-square] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span&gt;
+                                    &lt;span class=&quot;block text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                        Developers
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-0.5 block text-xs text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Build with WRNexusJS
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/span&gt;
+
+                            &lt;span class=&quot;icon-[lucide--chevron-down] h-5 w-5 shrink-0 text-slate-400 transition-transform duration-200&quot; class:rotate-180=&quot;openSection === 'developers'&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                        &lt;/button&gt;
+
+                        &lt;div
+                            id=&quot;mobile-developers-menu&quot;
+                            data-show=&quot;openSection === 'developers'&quot;
+                            class=&quot;border-t border-slate-200 px-3 py-3 dark:border-white/10&quot;
+                        &gt;
+                            &lt;div class=&quot;grid gap-1&quot;&gt;
+                                &lt;a
+                                    href=&quot;/docs&quot;
+                                    class=&quot;flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 hover:text-indigo-700 dark:text-slate-200 dark:hover:bg-white/5 dark:hover:text-indigo-300&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--book-open] h-5 w-5 text-indigo-600 dark:text-indigo-400&quot;&gt;&lt;/span&gt;
+                                    Documentation
+                                &lt;/a&gt;
+
+                                &lt;a
+                                    href=&quot;/docs/api&quot;
+                                    class=&quot;flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 hover:text-indigo-700 dark:text-slate-200 dark:hover:bg-white/5 dark:hover:text-indigo-300&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--braces] h-5 w-5 text-violet-600 dark:text-violet-400&quot;&gt;&lt;/span&gt;
+                                    API reference
+                                &lt;/a&gt;
+
+                                &lt;a
+                                    href=&quot;/sdks&quot;
+                                    class=&quot;flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 hover:text-indigo-700 dark:text-slate-200 dark:hover:bg-white/5 dark:hover:text-indigo-300&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--package] h-5 w-5 text-cyan-600 dark:text-cyan-400&quot;&gt;&lt;/span&gt;
+                                    SDKs
+                                &lt;/a&gt;
+
+                                &lt;a
+                                    href=&quot;/examples&quot;
+                                    class=&quot;flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 hover:text-indigo-700 dark:text-slate-200 dark:hover:bg-white/5 dark:hover:text-indigo-300&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--flask-conical] h-5 w-5 text-emerald-600 dark:text-emerald-400&quot;&gt;&lt;/span&gt;
+                                    Examples
+                                &lt;/a&gt;
+
+                                &lt;a
+                                    href=&quot;/changelog&quot;
+                                    class=&quot;flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 hover:text-indigo-700 dark:text-slate-200 dark:hover:bg-white/5 dark:hover:text-indigo-300&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--history] h-5 w-5 text-amber-600 dark:text-amber-400&quot;&gt;&lt;/span&gt;
+                                    Changelog
+                                &lt;/a&gt;
+                            &lt;/div&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+
+                    &lt;!-- Resources --&gt;
+                    &lt;div
+                        class=&quot;overflow-hidden rounded-2xl border border-slate-200 bg-white dark:border-white/10 dark:bg-white/5&quot;
+                    &gt;
+                        &lt;button
+                            type=&quot;button&quot;
+                            @click=&quot;openSection = openSection === 'resources' ? '' : 'resources'&quot;
+                            aria-expanded=&quot;&#123;openSection === 'resources'&#125;&quot;
+                            aria-controls=&quot;mobile-resources-menu&quot;
+                            class=&quot;flex w-full items-center justify-between gap-4 px-4 py-4 text-left transition hover:bg-slate-50 dark:hover:bg-white/5&quot;
+                            class:bg-indigo-50=&quot;openSection === 'resources'&quot;
+                            class:dark:bg-indigo-500/10=&quot;openSection === 'resources'&quot;
+                        &gt;
+                            &lt;span class=&quot;flex items-center gap-3&quot;&gt;
+                                &lt;span
+                                    class=&quot;grid h-10 w-10 shrink-0 place-items-center rounded-xl transition&quot;
+                                    class:bg-indigo-100=&quot;openSection === 'resources'&quot;
+                                    class:text-indigo-700=&quot;openSection === 'resources'&quot;
+                                    class:bg-slate-100=&quot;openSection !== 'resources'&quot;
+                                    class:text-slate-600=&quot;openSection !== 'resources'&quot;
+                                    class:dark:bg-indigo-500/15=&quot;openSection === 'resources'&quot;
+                                    class:dark:text-indigo-300=&quot;openSection === 'resources'&quot;
+                                    class:dark:bg-white/5=&quot;openSection !== 'resources'&quot;
+                                    class:dark:text-slate-300=&quot;openSection !== 'resources'&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--library] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span&gt;
+                                    &lt;span class=&quot;block text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                        Resources
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-0.5 block text-xs text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Learn and get support
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/span&gt;
+
+                            &lt;span class=&quot;icon-[lucide--chevron-down] h-5 w-5 shrink-0 text-slate-400 transition-transform duration-200&quot; class:rotate-180=&quot;openSection === 'resources'&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                        &lt;/button&gt;
+
+                        &lt;div
+                            id=&quot;mobile-resources-menu&quot;
+                            data-show=&quot;openSection === 'resources'&quot;
+                            class=&quot;border-t border-slate-200 px-3 py-3 dark:border-white/10&quot;
+                        &gt;
+                            &lt;div class=&quot;grid grid-cols-2 gap-2&quot;&gt;
+                                &lt;a
+                                    href=&quot;/blog&quot;
+                                    class=&quot;rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5&quot;
+                                &gt;
+                                    Blog
+                                &lt;/a&gt;
+
+                                &lt;a
+                                    href=&quot;/customers&quot;
+                                    class=&quot;rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5&quot;
+                                &gt;
+                                    Customer stories
+                                &lt;/a&gt;
+
+                                &lt;a
+                                    href=&quot;/guides&quot;
+                                    class=&quot;rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5&quot;
+                                &gt;
+                                    Guides
+                                &lt;/a&gt;
+
+                                &lt;a
+                                    href=&quot;/help&quot;
+                                    class=&quot;rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5&quot;
+                                &gt;
+                                    Help center
+                                &lt;/a&gt;
+
+                                &lt;a
+                                    href=&quot;/security&quot;
+                                    class=&quot;rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5&quot;
+                                &gt;
+                                    Security
+                                &lt;/a&gt;
+
+                                &lt;a
+                                    href=&quot;/trust&quot;
+                                    class=&quot;rounded-xl px-3 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5&quot;
+                                &gt;
+                                    Trust center
+                                &lt;/a&gt;
+                            &lt;/div&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+
+                    &lt;!-- Direct links --&gt;
+                    &lt;a
+                        href=&quot;/pricing&quot;
+                        class=&quot;flex items-center justify-between rounded-2xl border border-slate-200 bg-white px-4 py-4 text-sm font-semibold text-slate-950 transition hover:border-indigo-300 hover:bg-indigo-50 dark:border-white/10 dark:bg-white/5 dark:text-white dark:hover:border-indigo-500 dark:hover:bg-indigo-500/10&quot;
+                    &gt;
+                        &lt;span class=&quot;flex items-center gap-3&quot;&gt;
+                            &lt;span
+                                class=&quot;grid h-10 w-10 place-items-center rounded-xl bg-slate-100 text-slate-600 dark:bg-white/5 dark:text-slate-300&quot;
+                            &gt;
+                                &lt;span class=&quot;icon-[lucide--badge-dollar-sign] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/span&gt;
+
+                            Pricing
+                        &lt;/span&gt;
+
+                        &lt;span class=&quot;icon-[lucide--chevron-right] h-5 w-5 text-slate-400&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/a&gt;
+                &lt;/nav&gt;
+
+                &lt;!-- Mobile CTAs --&gt;
+                &lt;div class=&quot;mt-5 grid gap-3 border-t border-slate-200 pt-5 dark:border-white/10 sm:grid-cols-2&quot;&gt;
+                    &lt;a
+                        href=&quot;/sign-in&quot;
+                        class=&quot;flex h-12 items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white px-5 text-sm font-semibold text-slate-700 shadow-sm transition hover:border-indigo-300 hover:bg-slate-50 hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500 dark:hover:bg-white/10 dark:hover:text-indigo-300&quot;
+                    &gt;
+                        &lt;span class=&quot;icon-[lucide--log-in] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                        Sign in
+                    &lt;/a&gt;
+
+                    &lt;a
+                        href=&quot;/sign-up&quot;
+                        class=&quot;group flex h-12 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500&quot;
+                    &gt;
+                        Start free
+
+                        &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/a&gt;
+                &lt;/div&gt;
+
+                &lt;p class=&quot;mt-5 text-center text-xs leading-5 text-slate-400 dark:text-slate-500&quot;&gt;
+                    Secure identity infrastructure for modern applications.
+                &lt;/p&gt;
+
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/public-page-shell.wrn b/app/pages/components/public-page-shell.wrn
new file mode 100644
index 00000000..6f3f77a9
--- /dev/null
+++ b/app/pages/components/public-page-shell.wrn
@@ -0,0 +1,31 @@
+page PublicPageShellcomponent {
+  seo {
+    title = "PublicPageShell component"
+    description = "Reusable public page shell component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PublicPageShell</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>PublicPageShell</h1><p>Reusable public page shell component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PublicPageShell eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PublicPageShell&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PublicPageShell.wrn</code></p><pre data-language="wrn"><code>component PublicPageShell &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/public-search.wrn b/app/pages/components/public-search.wrn
new file mode 100644
index 00000000..d32d47dd
--- /dev/null
+++ b/app/pages/components/public-search.wrn
@@ -0,0 +1,146 @@
+page PublicSearchcomponent {
+  seo {
+    title = "PublicSearch component"
+    description = "Reusable public search component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PublicSearch</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>PublicSearch</h1><p>Reusable public search component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>15 props</span><span>0 slots</span><span>4 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PublicSearch query=&quot;query&quot; placeholder=&quot;Search...&quot; label=&quot;Search&quot; action=&quot;action&quot; method=&quot;get&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PublicSearch&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>query</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Search...&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Search&quot;</code></td></tr><tr><td><code>action</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>method</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;get&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;q&quot;</code></td></tr><tr><td><code>buttonLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>clearLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Clear search&quot;</code></td></tr><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>centered</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>fullWidth</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>showShortcut</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>shortcutLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;⌘ K&quot;</code></td></tr><tr><td><code>suggestions</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>input</code></li><li><code>focus</code></li><li><code>blur</code></li><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PublicSearch.wrn</code></p><pre data-language="wrn"><code>component PublicSearch &#123;
+    props &#123;
+        class: string = &quot;&quot;
+        query = &quot;&quot;
+
+        placeholder = &quot;Search...&quot;
+        label = &quot;Search&quot;
+
+        action = &quot;&quot;
+        method = &quot;get&quot;
+        name = &quot;q&quot;
+
+        buttonLabel = &quot;&quot;
+        clearLabel = &quot;Clear search&quot;
+
+        size = &quot;default&quot;
+        centered = false
+        fullWidth = false
+
+        showShortcut = false
+        shortcutLabel = &quot;⌘ K&quot;
+
+        suggestions = []
+    &#125;
+
+    state searchValue = query
+    state focused = false
+
+    view &#123;
+        &lt;div
+            class=&quot;w-full &#123;class&#125;&quot;
+            class:max-w-2xl=&quot;!fullWidth&quot;
+            class:mx-auto=&quot;centered&quot;
+        &gt;
+            &lt;form
+                action=&quot;&#123;action&#125;&quot;
+                method=&quot;&#123;method&#125;&quot;
+                role=&quot;search&quot;
+                class=&quot;w-full&quot;
+            &gt;
+                &lt;label
+                    for=&quot;public-search-input&quot;
+                    class=&quot;sr-only&quot;
+                &gt;
+                    &#123;label&#125;
+                &lt;/label&gt;
+
+                &lt;div
+                    class=&quot; group relative flex w-full items-center rounded-2xl border bg-white shadow-sm transition-all duration-200 dark:bg-white/5 &#123;focused ? 'border-indigo-400 ring-4 ring-indigo-500/10 dark:border-indigo-500/50 dark:ring-indigo-500/10' : 'border-slate-200 hover:border-slate-300 dark:border-white/10 dark:hover:border-white/20' &#125; &#123;size === 'compact' ? 'min-h-11' : size === 'large' ? 'min-h-14' : 'min-h-12' &#125; &quot;
+                &gt;
+                    &lt;!-- Search icon --&gt;
+                    &lt;span class=&quot; pointer-events-none absolute left-4 text-slate-400 transition group-focus-within:text-indigo-600 dark:text-slate-500 dark:group-focus-within:text-indigo-400 &#123;size === 'large' ? 'h-5 w-5' : 'h-4.5 w-4.5'&#125; icon-[lucide--search] &quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                    &lt;!-- Input --&gt;
+                    &lt;input
+                        id=&quot;public-search-input&quot;
+                        type=&quot;search&quot;
+                        name=&quot;&#123;name&#125;&quot;
+                        value=&quot;&#123;searchValue&#125;&quot;
+                        placeholder=&quot;&#123;placeholder&#125;&quot;
+                        autocomplete=&quot;off&quot;
+                        @input=&quot;searchValue = event.target.value&quot;
+                        @focus=&quot;focused = true&quot;
+                        @blur=&quot;focused = false&quot;
+                        class=&quot; min-w-0 flex-1 bg-transparent text-slate-950 outline-none placeholder:text-slate-400 dark:text-white dark:placeholder:text-slate-500 &#123;size === 'compact' ? 'h-11 pl-11 pr-3 text-sm' : size === 'large' ? 'h-14 pl-12 pr-4 text-base' : 'h-12 pl-11 pr-4 text-sm' &#125; &quot;
+                    /&gt;
+
+                    &lt;!-- Keyboard shortcut --&gt;
+                    &lt;span
+                        class=&quot;mr-3 hidden shrink-0 items-center rounded-md border border-slate-200 bg-slate-50 px-2 py-1 text-[11px] font-semibold text-slate-400 dark:border-white/10 dark:bg-white/5 dark:text-slate-500 sm:inline-flex&quot;
+                        class:hidden=&quot;!showShortcut || searchValue !== ''&quot;
+                    &gt;
+                        &#123;shortcutLabel&#125;
+                    &lt;/span&gt;
+
+                    &lt;!-- Clear button --&gt;
+                    &lt;button
+                        type=&quot;button&quot;
+                        @click=&quot;searchValue = ''&quot;
+                        aria-label=&quot;&#123;clearLabel&#125;&quot;
+                        class=&quot;mr-2 grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-500 dark:hover:bg-white/10 dark:hover:text-slate-200&quot;
+                        class:hidden=&quot;searchValue === ''&quot;
+                    &gt;
+                        &lt;span class=&quot;icon-[lucide--x] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/button&gt;
+
+                    &lt;!-- Submit button --&gt;
+                    &lt;button
+                        type=&quot;submit&quot;
+                        class=&quot; mr-1.5 shrink-0 items-center justify-center gap-2 rounded-xl bg-indigo-600 font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900 &#123;size === 'compact' ? 'h-9 px-3 text-xs' : size === 'large' ? 'h-11 px-5 text-sm' : 'h-10 px-4 text-sm' &#125; &quot;
+                        class:hidden=&quot;buttonLabel === ''&quot;
+                        class:inline-flex=&quot;buttonLabel !== ''&quot;
+                    &gt;
+                        &#123;buttonLabel&#125;
+
+                        &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/button&gt;
+                &lt;/div&gt;
+            &lt;/form&gt;
+
+            &lt;!-- Suggested searches --&gt;
+            &lt;div
+                class=&quot;mt-4 flex flex-wrap items-center gap-2&quot;
+                class:hidden=&quot;suggestions.length === 0&quot;
+                class:justify-center=&quot;centered&quot;
+                class:justify-start=&quot;!centered&quot;
+            &gt;
+                &lt;span class=&quot;mr-1 text-xs font-medium text-slate-500 dark:text-slate-400&quot;&gt;
+                    Popular:
+                &lt;/span&gt;
+
+                &#123;#each suggestions.slice(0, 5) as suggestion&#125;
+                &lt;a
+                    href=&quot;&#123;suggestion.href&#125;&quot;
+                    class=&quot;inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs font-semibold text-slate-600 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-indigo-50 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-300&quot;
+                &gt;
+                    &lt;span class=&quot;&#123;suggestion.iconClass&#125; h-3.5 w-3.5&quot; aria-hidden=&quot;true&quot; class:hidden=&quot;suggestion.iconClass === ''&quot; &gt;&lt;/span&gt;
+
+                    &#123;suggestion.label&#125;
+                &lt;/a&gt;
+                &#123;/each&#125;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/publish-date-time-picker.wrn b/app/pages/components/publish-date-time-picker.wrn
new file mode 100644
index 00000000..2aa84a77
--- /dev/null
+++ b/app/pages/components/publish-date-time-picker.wrn
@@ -0,0 +1,37 @@
+page PublishDateTimePickercomponent {
+  seo {
+    title = "PublishDateTimePicker component"
+    description = "Reusable publish date time picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PublishDateTimePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>PublishDateTimePicker</h1><p>Reusable publish date time picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PublishDateTimePicker label=&quot;PublishDateTime&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PublishDateTimePicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;PublishDateTime&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PublishDateTimePicker.wrn</code></p><pre data-language="wrn"><code>component PublishDateTimePicker &#123;
+  props &#123;
+    label = &quot;PublishDateTime&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/push-composer.wrn b/app/pages/components/push-composer.wrn
new file mode 100644
index 00000000..0159e528
--- /dev/null
+++ b/app/pages/components/push-composer.wrn
@@ -0,0 +1,34 @@
+page PushComposercomponent {
+  seo {
+    title = "PushComposer component"
+    description = "Reusable push composer component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PushComposer</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>PushComposer</h1><p>Reusable push composer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PushComposer eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PushComposer&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PushComposer.wrn</code></p><pre data-language="wrn"><code>component PushComposer &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/push-notification-editor.wrn b/app/pages/components/push-notification-editor.wrn
new file mode 100644
index 00000000..239c5934
--- /dev/null
+++ b/app/pages/components/push-notification-editor.wrn
@@ -0,0 +1,37 @@
+page PushNotificationEditorcomponent {
+  seo {
+    title = "PushNotificationEditor component"
+    description = "Reusable push notification editor component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PushNotificationEditor</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>PushNotificationEditor</h1><p>Reusable push notification editor component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;PushNotificationEditor label=&quot;PushNotification&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;PushNotificationEditor&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;PushNotification&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/PushNotificationEditor.wrn</code></p><pre data-language="wrn"><code>component PushNotificationEditor &#123;
+  props &#123;
+    label = &quot;PushNotification&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/qr-code.wrn b/app/pages/components/qr-code.wrn
new file mode 100644
index 00000000..d20d485d
--- /dev/null
+++ b/app/pages/components/qr-code.wrn
@@ -0,0 +1,34 @@
+page QrCodecomponent {
+  seo {
+    title = "QrCode component"
+    description = "Reusable qr code component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">QrCode</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>QrCode</h1><p>Reusable qr code component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;QrCode eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;QrCode&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/QrCode.wrn</code></p><pre data-language="wrn"><code>component QrCode &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/quantity-input.wrn b/app/pages/components/quantity-input.wrn
new file mode 100644
index 00000000..26219d44
--- /dev/null
+++ b/app/pages/components/quantity-input.wrn
@@ -0,0 +1,37 @@
+page QuantityInputcomponent {
+  seo {
+    title = "QuantityInput component"
+    description = "Reusable quantity input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">QuantityInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>QuantityInput</h1><p>Reusable quantity input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;QuantityInput label=&quot;Quantity&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;QuantityInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Quantity&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/QuantityInput.wrn</code></p><pre data-language="wrn"><code>component QuantityInput &#123;
+  props &#123;
+    label = &quot;Quantity&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/quantity-stepper.wrn b/app/pages/components/quantity-stepper.wrn
new file mode 100644
index 00000000..77dd220c
--- /dev/null
+++ b/app/pages/components/quantity-stepper.wrn
@@ -0,0 +1,34 @@
+page QuantitySteppercomponent {
+  seo {
+    title = "QuantityStepper component"
+    description = "Reusable quantity stepper component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">QuantityStepper</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>QuantityStepper</h1><p>Reusable quantity stepper component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;QuantityStepper eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;QuantityStepper&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/QuantityStepper.wrn</code></p><pre data-language="wrn"><code>component QuantityStepper &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/quiet-hours-picker.wrn b/app/pages/components/quiet-hours-picker.wrn
new file mode 100644
index 00000000..b3033657
--- /dev/null
+++ b/app/pages/components/quiet-hours-picker.wrn
@@ -0,0 +1,36 @@
+page QuietHoursPickercomponent {
+  seo {
+    title = "QuietHoursPicker component"
+    description = "Reusable quiet hours picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">QuietHoursPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>QuietHoursPicker</h1><p>Reusable quiet hours picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;QuietHoursPicker label=&quot;Quiet hours&quot; startName=&quot;quietStart&quot; endName=&quot;quietEnd&quot; start=&quot;22:00&quot; end=&quot;08:00&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;QuietHoursPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Quiet hours&quot;</code></td></tr><tr><td><code>startName</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;quietStart&quot;</code></td></tr><tr><td><code>endName</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;quietEnd&quot;</code></td></tr><tr><td><code>start</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;22:00&quot;</code></td></tr><tr><td><code>end</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;08:00&quot;</code></td></tr><tr><td><code>timezone</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;UTC&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/QuietHoursPicker.wrn</code></p><pre data-language="wrn"><code>component QuietHoursPicker &#123;
+  props &#123;
+    label = &quot;Quiet hours&quot;
+    startName = &quot;quietStart&quot;
+    endName = &quot;quietEnd&quot;
+    start = &quot;22:00&quot;
+    end = &quot;08:00&quot;
+    timezone = &quot;UTC&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;fieldset class=&quot;wire-fieldset &#123;class&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot;&gt;&lt;legend class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;/legend&gt;&lt;div class=&quot;wire-form-row&quot;&gt;&lt;label class=&quot;wire-field&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;From&lt;/span&gt;&lt;input type=&quot;time&quot; name=&quot;&#123;startName&#125;&quot; value=&quot;&#123;start&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;/label&gt;&lt;label class=&quot;wire-field&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;Until&lt;/span&gt;&lt;input type=&quot;time&quot; name=&quot;&#123;endName&#125;&quot; value=&quot;&#123;end&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;/label&gt;&lt;/div&gt;&lt;p class=&quot;wire-field-message wire-field-message--help&quot;&gt;Timezone: &#123;timezone&#125;&lt;/p&gt;&lt;/fieldset&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/quote-text.wrn b/app/pages/components/quote-text.wrn
new file mode 100644
index 00000000..478c6f40
--- /dev/null
+++ b/app/pages/components/quote-text.wrn
@@ -0,0 +1,29 @@
+page QuoteTextcomponent {
+  seo {
+    title = "QuoteText component"
+    description = "Reusable quote text component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">QuoteText</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>QuoteText</h1><p>Reusable quote text component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;QuoteText text=&quot;text&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;QuoteText&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>text</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/QuoteText.wrn</code></p><pre data-language="wrn"><code>component QuoteText &#123;
+  props &#123;
+    text = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-type wire-type--lead wire-text--&#123;align&#125;  &#123;class&#125;&quot;&gt;&#123;text&#125;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/radio-group.wrn b/app/pages/components/radio-group.wrn
new file mode 100644
index 00000000..059ab754
--- /dev/null
+++ b/app/pages/components/radio-group.wrn
@@ -0,0 +1,31 @@
+page RadioGroupcomponent {
+  seo {
+    title = "RadioGroup component"
+    description = "Reusable radio group component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RadioGroup</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>RadioGroup</h1><p>Reusable radio group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RadioGroup label=&quot;Choose one&quot; name=&quot;choice&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RadioGroup&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Choose one&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;choice&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RadioGroup.wrn</code></p><pre data-language="wrn"><code>component RadioGroup &#123;
+  props &#123;
+    class = &quot;&quot;
+    label = &quot;Choose one&quot;
+    name = &quot;choice&quot;
+  &#125;
+  view &#123;
+    &lt;fieldset class=&quot;space-y-3 &#123;class&#125;&quot;&gt;&lt;legend class=&quot;text-sm font-semibold text-slate-900 dark:text-white&quot;&gt;&#123;label&#125;&lt;/legend&gt;&lt;div class=&quot;space-y-2&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;/fieldset&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/radio.wrn b/app/pages/components/radio.wrn
new file mode 100644
index 00000000..e281b620
--- /dev/null
+++ b/app/pages/components/radio.wrn
@@ -0,0 +1,36 @@
+page Radiocomponent {
+  seo {
+    title = "Radio component"
+    description = "Reusable radio component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Radio</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Radio</h1><p>Reusable radio component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Radio id=&quot;id&quot; name=&quot;choice&quot; value=&quot;value&quot; label=&quot;Option&quot; description=&quot;description&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Radio&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;choice&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Option&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>checked</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Radio.wrn</code></p><pre data-language="wrn"><code>component Radio &#123;
+  props &#123;
+    class = &quot;&quot;
+    id = &quot;&quot;
+    name = &quot;choice&quot;
+    value = &quot;&quot;
+    label = &quot;Option&quot;
+    description = &quot;&quot;
+    checked = false
+    disabled = false
+  &#125;
+  view &#123;
+    &lt;label for=&quot;&#123;id&#125;&quot; class=&quot;flex min-h-11 cursor-pointer items-start gap-3 rounded-xl border border-slate-200 p-3 transition hover:border-violet-400 dark:border-slate-800 &#123;class&#125;&quot;&gt;&lt;input id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; type=&quot;radio&quot; value=&quot;&#123;value&#125;&quot; checked=&quot;&#123;checked&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;mt-0.5 size-5 border-slate-300 text-violet-600 focus:ring-violet-500&quot; /&gt;&lt;span&gt;&lt;span class=&quot;block text-sm font-semibold&quot;&gt;&#123;label&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;text-sm text-slate-500&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/span&gt;&lt;/label&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/range-input.wrn b/app/pages/components/range-input.wrn
new file mode 100644
index 00000000..3439e5e6
--- /dev/null
+++ b/app/pages/components/range-input.wrn
@@ -0,0 +1,37 @@
+page RangeInputcomponent {
+  seo {
+    title = "RangeInput component"
+    description = "Reusable range input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RangeInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>RangeInput</h1><p>Reusable range input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RangeInput label=&quot;Range&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RangeInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Range&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RangeInput.wrn</code></p><pre data-language="wrn"><code>component RangeInput &#123;
+  props &#123;
+    label = &quot;Range&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/range-slider.wrn b/app/pages/components/range-slider.wrn
new file mode 100644
index 00000000..c95b33c6
--- /dev/null
+++ b/app/pages/components/range-slider.wrn
@@ -0,0 +1,34 @@
+page RangeSlidercomponent {
+  seo {
+    title = "RangeSlider component"
+    description = "Reusable range slider component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RangeSlider</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>RangeSlider</h1><p>Reusable range slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RangeSlider eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RangeSlider&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RangeSlider.wrn</code></p><pre data-language="wrn"><code>component RangeSlider &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/rate-limit-input.wrn b/app/pages/components/rate-limit-input.wrn
new file mode 100644
index 00000000..0cbc5097
--- /dev/null
+++ b/app/pages/components/rate-limit-input.wrn
@@ -0,0 +1,37 @@
+page RateLimitInputcomponent {
+  seo {
+    title = "RateLimitInput component"
+    description = "Reusable rate limit input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RateLimitInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>RateLimitInput</h1><p>Reusable rate limit input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RateLimitInput label=&quot;RateLimit&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RateLimitInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;RateLimit&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RateLimitInput.wrn</code></p><pre data-language="wrn"><code>component RateLimitInput &#123;
+  props &#123;
+    label = &quot;RateLimit&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/rate-limit-page.wrn b/app/pages/components/rate-limit-page.wrn
new file mode 100644
index 00000000..3f965b78
--- /dev/null
+++ b/app/pages/components/rate-limit-page.wrn
@@ -0,0 +1,34 @@
+page RateLimitPagecomponent {
+  seo {
+    title = "RateLimitPage component"
+    description = "Reusable rate limit page component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RateLimitPage</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>RateLimitPage</h1><p>Reusable rate limit page component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RateLimitPage eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RateLimitPage&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RateLimitPage.wrn</code></p><pre data-language="wrn"><code>component RateLimitPage &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/rate-limited-state.wrn b/app/pages/components/rate-limited-state.wrn
new file mode 100644
index 00000000..226b8cdf
--- /dev/null
+++ b/app/pages/components/rate-limited-state.wrn
@@ -0,0 +1,32 @@
+page RateLimitedStatecomponent {
+  seo {
+    title = "RateLimitedState component"
+    description = "Reusable rate limited state component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RateLimitedState</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>RateLimitedState</h1><p>Reusable rate limited state component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RateLimitedState label=&quot;RateLimited&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RateLimitedState&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;RateLimited&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RateLimitedState.wrn</code></p><pre data-language="wrn"><code>component RateLimitedState &#123;
+  props &#123;
+    label = &quot;RateLimited&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/rate-table.wrn b/app/pages/components/rate-table.wrn
new file mode 100644
index 00000000..2cadbae3
--- /dev/null
+++ b/app/pages/components/rate-table.wrn
@@ -0,0 +1,31 @@
+page RateTablecomponent {
+  seo {
+    title = "RateTable component"
+    description = "Reusable rate table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RateTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>RateTable</h1><p>Reusable rate table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RateTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RateTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RateTable.wrn</code></p><pre data-language="wrn"><code>component RateTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/rating-slider.wrn b/app/pages/components/rating-slider.wrn
new file mode 100644
index 00000000..7d9e3fff
--- /dev/null
+++ b/app/pages/components/rating-slider.wrn
@@ -0,0 +1,34 @@
+page RatingSlidercomponent {
+  seo {
+    title = "RatingSlider component"
+    description = "Reusable rating slider component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RatingSlider</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>RatingSlider</h1><p>Reusable rating slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RatingSlider eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RatingSlider&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RatingSlider.wrn</code></p><pre data-language="wrn"><code>component RatingSlider &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/recipient-selector.wrn b/app/pages/components/recipient-selector.wrn
new file mode 100644
index 00000000..696cd3d4
--- /dev/null
+++ b/app/pages/components/recipient-selector.wrn
@@ -0,0 +1,37 @@
+page RecipientSelectorcomponent {
+  seo {
+    title = "RecipientSelector component"
+    description = "Reusable recipient selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RecipientSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>RecipientSelector</h1><p>Reusable recipient selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RecipientSelector label=&quot;Recipient&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RecipientSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Recipient&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RecipientSelector.wrn</code></p><pre data-language="wrn"><code>component RecipientSelector &#123;
+  props &#123;
+    label = &quot;Recipient&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/recovery-code-form.wrn b/app/pages/components/recovery-code-form.wrn
new file mode 100644
index 00000000..350a1078
--- /dev/null
+++ b/app/pages/components/recovery-code-form.wrn
@@ -0,0 +1,34 @@
+page RecoveryCodeFormcomponent {
+  seo {
+    title = "RecoveryCodeForm component"
+    description = "Reusable recovery code form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RecoveryCodeForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>RecoveryCodeForm</h1><p>Reusable recovery code form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RecoveryCodeForm eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RecoveryCodeForm&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RecoveryCodeForm.wrn</code></p><pre data-language="wrn"><code>component RecoveryCodeForm &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/recovery-code-input.wrn b/app/pages/components/recovery-code-input.wrn
new file mode 100644
index 00000000..f342c237
--- /dev/null
+++ b/app/pages/components/recovery-code-input.wrn
@@ -0,0 +1,37 @@
+page RecoveryCodeInputcomponent {
+  seo {
+    title = "RecoveryCodeInput component"
+    description = "Reusable recovery code input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RecoveryCodeInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>RecoveryCodeInput</h1><p>Reusable recovery code input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RecoveryCodeInput label=&quot;RecoveryCode&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RecoveryCodeInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;RecoveryCode&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RecoveryCodeInput.wrn</code></p><pre data-language="wrn"><code>component RecoveryCodeInput &#123;
+  props &#123;
+    label = &quot;RecoveryCode&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/recurrence-rule-builder.wrn b/app/pages/components/recurrence-rule-builder.wrn
new file mode 100644
index 00000000..7793c96e
--- /dev/null
+++ b/app/pages/components/recurrence-rule-builder.wrn
@@ -0,0 +1,34 @@
+page RecurrenceRuleBuildercomponent {
+  seo {
+    title = "RecurrenceRuleBuilder component"
+    description = "Reusable recurrence rule builder component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RecurrenceRuleBuilder</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>RecurrenceRuleBuilder</h1><p>Reusable recurrence rule builder component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RecurrenceRuleBuilder eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RecurrenceRuleBuilder&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RecurrenceRuleBuilder.wrn</code></p><pre data-language="wrn"><code>component RecurrenceRuleBuilder &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/recurring-schedule-picker.wrn b/app/pages/components/recurring-schedule-picker.wrn
new file mode 100644
index 00000000..f3d36546
--- /dev/null
+++ b/app/pages/components/recurring-schedule-picker.wrn
@@ -0,0 +1,34 @@
+page RecurringSchedulePickercomponent {
+  seo {
+    title = "RecurringSchedulePicker component"
+    description = "Reusable recurring schedule picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RecurringSchedulePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>RecurringSchedulePicker</h1><p>Reusable recurring schedule picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RecurringSchedulePicker id=&quot;recurring-schedule&quot; name=&quot;recurrence&quot; label=&quot;Repeat&quot; value=&quot;none&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RecurringSchedulePicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;recurring-schedule&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;recurrence&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Repeat&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;none&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RecurringSchedulePicker.wrn</code></p><pre data-language="wrn"><code>component RecurringSchedulePicker &#123;
+  props &#123;
+    id = &quot;recurring-schedule&quot;
+    name = &quot;recurrence&quot;
+    label = &quot;Repeat&quot;
+    value = &quot;none&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;wire-field &#123;class&#125;&quot;&gt;&lt;label for=&quot;&#123;id&#125;&quot; class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;/label&gt;&lt;select id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-input&quot;&gt;&lt;option value=&quot;none&quot; selected=&quot;&#123;value === 'none'&#125;&quot;&gt;Does not repeat&lt;/option&gt;&lt;option value=&quot;daily&quot; selected=&quot;&#123;value === 'daily'&#125;&quot;&gt;Daily&lt;/option&gt;&lt;option value=&quot;weekly&quot; selected=&quot;&#123;value === 'weekly'&#125;&quot;&gt;Weekly&lt;/option&gt;&lt;option value=&quot;monthly&quot; selected=&quot;&#123;value === 'monthly'&#125;&quot;&gt;Monthly&lt;/option&gt;&lt;option value=&quot;yearly&quot; selected=&quot;&#123;value === 'yearly'&#125;&quot;&gt;Yearly&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/redirect-uri-input.wrn b/app/pages/components/redirect-uri-input.wrn
new file mode 100644
index 00000000..1a3623a0
--- /dev/null
+++ b/app/pages/components/redirect-uri-input.wrn
@@ -0,0 +1,37 @@
+page RedirectUriInputcomponent {
+  seo {
+    title = "RedirectUriInput component"
+    description = "Reusable redirect uri input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RedirectUriInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>RedirectUriInput</h1><p>Reusable redirect uri input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RedirectUriInput label=&quot;RedirectUri&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RedirectUriInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;RedirectUri&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RedirectUriInput.wrn</code></p><pre data-language="wrn"><code>component RedirectUriInput &#123;
+  props &#123;
+    label = &quot;RedirectUri&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/reference-input.wrn b/app/pages/components/reference-input.wrn
new file mode 100644
index 00000000..ecf38bbf
--- /dev/null
+++ b/app/pages/components/reference-input.wrn
@@ -0,0 +1,37 @@
+page ReferenceInputcomponent {
+  seo {
+    title = "ReferenceInput component"
+    description = "Reusable reference input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ReferenceInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ReferenceInput</h1><p>Reusable reference input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ReferenceInput label=&quot;Reference&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ReferenceInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Reference&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ReferenceInput.wrn</code></p><pre data-language="wrn"><code>component ReferenceInput &#123;
+  props &#123;
+    label = &quot;Reference&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/regex-input.wrn b/app/pages/components/regex-input.wrn
new file mode 100644
index 00000000..3693957f
--- /dev/null
+++ b/app/pages/components/regex-input.wrn
@@ -0,0 +1,37 @@
+page RegexInputcomponent {
+  seo {
+    title = "RegexInput component"
+    description = "Reusable regex input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RegexInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>RegexInput</h1><p>Reusable regex input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RegexInput label=&quot;Regex&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RegexInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Regex&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RegexInput.wrn</code></p><pre data-language="wrn"><code>component RegexInput &#123;
+  props &#123;
+    label = &quot;Regex&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/region-availability-table.wrn b/app/pages/components/region-availability-table.wrn
new file mode 100644
index 00000000..1cbe12b8
--- /dev/null
+++ b/app/pages/components/region-availability-table.wrn
@@ -0,0 +1,31 @@
+page RegionAvailabilityTablecomponent {
+  seo {
+    title = "RegionAvailabilityTable component"
+    description = "Reusable region availability table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RegionAvailabilityTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>RegionAvailabilityTable</h1><p>Reusable region availability table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RegionAvailabilityTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RegionAvailabilityTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RegionAvailabilityTable.wrn</code></p><pre data-language="wrn"><code>component RegionAvailabilityTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/region-selector.wrn b/app/pages/components/region-selector.wrn
new file mode 100644
index 00000000..8f18ca9d
--- /dev/null
+++ b/app/pages/components/region-selector.wrn
@@ -0,0 +1,37 @@
+page RegionSelectorcomponent {
+  seo {
+    title = "RegionSelector component"
+    description = "Reusable region selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RegionSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>RegionSelector</h1><p>Reusable region selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RegionSelector label=&quot;Region&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RegionSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Region&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RegionSelector.wrn</code></p><pre data-language="wrn"><code>component RegionSelector &#123;
+  props &#123;
+    label = &quot;Region&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/region-unavailable-alert.wrn b/app/pages/components/region-unavailable-alert.wrn
new file mode 100644
index 00000000..331a2f6e
--- /dev/null
+++ b/app/pages/components/region-unavailable-alert.wrn
@@ -0,0 +1,32 @@
+page RegionUnavailableAlertcomponent {
+  seo {
+    title = "RegionUnavailableAlert component"
+    description = "Reusable region unavailable alert component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RegionUnavailableAlert</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>RegionUnavailableAlert</h1><p>Reusable region unavailable alert component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RegionUnavailableAlert label=&quot;RegionUnavailable&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RegionUnavailableAlert&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;RegionUnavailable&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RegionUnavailableAlert.wrn</code></p><pre data-language="wrn"><code>component RegionUnavailableAlert &#123;
+  props &#123;
+    label = &quot;RegionUnavailable&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/region-unavailable-state.wrn b/app/pages/components/region-unavailable-state.wrn
new file mode 100644
index 00000000..0a42c3c5
--- /dev/null
+++ b/app/pages/components/region-unavailable-state.wrn
@@ -0,0 +1,32 @@
+page RegionUnavailableStatecomponent {
+  seo {
+    title = "RegionUnavailableState component"
+    description = "Reusable region unavailable state component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RegionUnavailableState</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>RegionUnavailableState</h1><p>Reusable region unavailable state component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RegionUnavailableState label=&quot;RegionUnavailable&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RegionUnavailableState&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;RegionUnavailable&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RegionUnavailableState.wrn</code></p><pre data-language="wrn"><code>component RegionUnavailableState &#123;
+  props &#123;
+    label = &quot;RegionUnavailable&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/regional-privacy-banner.wrn b/app/pages/components/regional-privacy-banner.wrn
new file mode 100644
index 00000000..884e4993
--- /dev/null
+++ b/app/pages/components/regional-privacy-banner.wrn
@@ -0,0 +1,32 @@
+page RegionalPrivacyBannercomponent {
+  seo {
+    title = "RegionalPrivacyBanner component"
+    description = "Reusable regional privacy banner component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RegionalPrivacyBanner</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>RegionalPrivacyBanner</h1><p>Reusable regional privacy banner component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RegionalPrivacyBanner label=&quot;RegionalPrivacy&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RegionalPrivacyBanner&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;RegionalPrivacy&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RegionalPrivacyBanner.wrn</code></p><pre data-language="wrn"><code>component RegionalPrivacyBanner &#123;
+  props &#123;
+    label = &quot;RegionalPrivacy&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/reject-optional-cookies-button.wrn b/app/pages/components/reject-optional-cookies-button.wrn
new file mode 100644
index 00000000..b688bc2d
--- /dev/null
+++ b/app/pages/components/reject-optional-cookies-button.wrn
@@ -0,0 +1,32 @@
+page RejectOptionalCookiesButtoncomponent {
+  seo {
+    title = "RejectOptionalCookiesButton component"
+    description = "Reusable reject optional cookies button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RejectOptionalCookiesButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>RejectOptionalCookiesButton</h1><p>Reusable reject optional cookies button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RejectOptionalCookiesButton label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RejectOptionalCookiesButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RejectOptionalCookiesButton.wrn</code></p><pre data-language="wrn"><code>component RejectOptionalCookiesButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/reopen-cookie-settings-button.wrn b/app/pages/components/reopen-cookie-settings-button.wrn
new file mode 100644
index 00000000..e755ba2a
--- /dev/null
+++ b/app/pages/components/reopen-cookie-settings-button.wrn
@@ -0,0 +1,32 @@
+page ReopenCookieSettingsButtoncomponent {
+  seo {
+    title = "ReopenCookieSettingsButton component"
+    description = "Reusable reopen cookie settings button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ReopenCookieSettingsButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>ReopenCookieSettingsButton</h1><p>Reusable reopen cookie settings button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ReopenCookieSettingsButton label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ReopenCookieSettingsButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ReopenCookieSettingsButton.wrn</code></p><pre data-language="wrn"><code>component ReopenCookieSettingsButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/report-card.wrn b/app/pages/components/report-card.wrn
new file mode 100644
index 00000000..4169bdb3
--- /dev/null
+++ b/app/pages/components/report-card.wrn
@@ -0,0 +1,34 @@
+page ReportCardcomponent {
+  seo {
+    title = "ReportCard component"
+    description = "Reusable report card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ReportCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ReportCard</h1><p>Reusable report card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ReportCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ReportCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ReportCard.wrn</code></p><pre data-language="wrn"><code>component ReportCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/request-response-viewer.wrn b/app/pages/components/request-response-viewer.wrn
new file mode 100644
index 00000000..fb57c016
--- /dev/null
+++ b/app/pages/components/request-response-viewer.wrn
@@ -0,0 +1,34 @@
+page RequestResponseViewercomponent {
+  seo {
+    title = "RequestResponseViewer component"
+    description = "Reusable request response viewer component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RequestResponseViewer</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>RequestResponseViewer</h1><p>Reusable request response viewer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RequestResponseViewer eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RequestResponseViewer&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RequestResponseViewer.wrn</code></p><pre data-language="wrn"><code>component RequestResponseViewer &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/request-viewer.wrn b/app/pages/components/request-viewer.wrn
new file mode 100644
index 00000000..c5844217
--- /dev/null
+++ b/app/pages/components/request-viewer.wrn
@@ -0,0 +1,34 @@
+page RequestViewercomponent {
+  seo {
+    title = "RequestViewer component"
+    description = "Reusable request viewer component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RequestViewer</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>RequestViewer</h1><p>Reusable request viewer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RequestViewer eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RequestViewer&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RequestViewer.wrn</code></p><pre data-language="wrn"><code>component RequestViewer &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/required-indicator.wrn b/app/pages/components/required-indicator.wrn
new file mode 100644
index 00000000..6a438847
--- /dev/null
+++ b/app/pages/components/required-indicator.wrn
@@ -0,0 +1,32 @@
+page RequiredIndicatorcomponent {
+  seo {
+    title = "RequiredIndicator component"
+    description = "Reusable required indicator component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RequiredIndicator</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>RequiredIndicator</h1><p>Reusable required indicator component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RequiredIndicator label=&quot;Required&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RequiredIndicator&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Required&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RequiredIndicator.wrn</code></p><pre data-language="wrn"><code>component RequiredIndicator &#123;
+  props &#123;
+    label = &quot;Required&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/reset-password-form.wrn b/app/pages/components/reset-password-form.wrn
new file mode 100644
index 00000000..cabd98f2
--- /dev/null
+++ b/app/pages/components/reset-password-form.wrn
@@ -0,0 +1,34 @@
+page ResetPasswordFormcomponent {
+  seo {
+    title = "ResetPasswordForm component"
+    description = "Reusable reset password form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ResetPasswordForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ResetPasswordForm</h1><p>Reusable reset password form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ResetPasswordForm eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ResetPasswordForm&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ResetPasswordForm.wrn</code></p><pre data-language="wrn"><code>component ResetPasswordForm &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/resizable-panel.wrn b/app/pages/components/resizable-panel.wrn
new file mode 100644
index 00000000..337e4214
--- /dev/null
+++ b/app/pages/components/resizable-panel.wrn
@@ -0,0 +1,31 @@
+page ResizablePanelcomponent {
+  seo {
+    title = "ResizablePanel component"
+    description = "Reusable resizable panel component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ResizablePanel</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ResizablePanel</h1><p>Reusable resizable panel component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ResizablePanel eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ResizablePanel&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ResizablePanel.wrn</code></p><pre data-language="wrn"><code>component ResizablePanel &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/resource-card.wrn b/app/pages/components/resource-card.wrn
new file mode 100644
index 00000000..e47634c4
--- /dev/null
+++ b/app/pages/components/resource-card.wrn
@@ -0,0 +1,34 @@
+page ResourceCardcomponent {
+  seo {
+    title = "ResourceCard component"
+    description = "Reusable resource card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ResourceCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ResourceCard</h1><p>Reusable resource card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ResourceCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ResourceCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ResourceCard.wrn</code></p><pre data-language="wrn"><code>component ResourceCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/resource-download-card.wrn b/app/pages/components/resource-download-card.wrn
new file mode 100644
index 00000000..04b56360
--- /dev/null
+++ b/app/pages/components/resource-download-card.wrn
@@ -0,0 +1,34 @@
+page ResourceDownloadCardcomponent {
+  seo {
+    title = "ResourceDownloadCard component"
+    description = "Reusable resource download card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ResourceDownloadCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ResourceDownloadCard</h1><p>Reusable resource download card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ResourceDownloadCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ResourceDownloadCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ResourceDownloadCard.wrn</code></p><pre data-language="wrn"><code>component ResourceDownloadCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/resource-page-shell.wrn b/app/pages/components/resource-page-shell.wrn
new file mode 100644
index 00000000..f02f0745
--- /dev/null
+++ b/app/pages/components/resource-page-shell.wrn
@@ -0,0 +1,31 @@
+page ResourcePageShellcomponent {
+  seo {
+    title = "ResourcePageShell component"
+    description = "Reusable resource page shell component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ResourcePageShell</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ResourcePageShell</h1><p>Reusable resource page shell component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ResourcePageShell eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ResourcePageShell&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ResourcePageShell.wrn</code></p><pre data-language="wrn"><code>component ResourcePageShell &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/resource-search.wrn b/app/pages/components/resource-search.wrn
new file mode 100644
index 00000000..470748d9
--- /dev/null
+++ b/app/pages/components/resource-search.wrn
@@ -0,0 +1,34 @@
+page ResourceSearchcomponent {
+  seo {
+    title = "ResourceSearch component"
+    description = "Reusable resource search component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ResourceSearch</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ResourceSearch</h1><p>Reusable resource search component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ResourceSearch eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ResourceSearch&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ResourceSearch.wrn</code></p><pre data-language="wrn"><code>component ResourceSearch &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/resource-type-badge.wrn b/app/pages/components/resource-type-badge.wrn
new file mode 100644
index 00000000..17b0a8d5
--- /dev/null
+++ b/app/pages/components/resource-type-badge.wrn
@@ -0,0 +1,32 @@
+page ResourceTypeBadgecomponent {
+  seo {
+    title = "ResourceTypeBadge component"
+    description = "Reusable resource type badge component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ResourceTypeBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>ResourceTypeBadge</h1><p>Reusable resource type badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ResourceTypeBadge label=&quot;ResourceType&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ResourceTypeBadge&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;ResourceType&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ResourceTypeBadge.wrn</code></p><pre data-language="wrn"><code>component ResourceTypeBadge &#123;
+  props &#123;
+    label = &quot;ResourceType&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/resources-mega-menu.wrn b/app/pages/components/resources-mega-menu.wrn
new file mode 100644
index 00000000..6ac8300d
--- /dev/null
+++ b/app/pages/components/resources-mega-menu.wrn
@@ -0,0 +1,386 @@
+page ResourcesMegaMenucomponent {
+  seo {
+    title = "ResourcesMegaMenu component"
+    description = "Reusable resources mega menu component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ResourcesMegaMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>ResourcesMegaMenu</h1><p>Reusable resources mega menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ResourcesMegaMenu /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ResourcesMegaMenu&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ResourcesMegaMenu.wrn</code></p><pre data-language="wrn"><code>component ResourcesMegaMenu &#123;
+    props &#123;
+        class: string = &quot;&quot;
+    &#125;
+    view &#123;
+        &lt;div
+            class=&quot;border-t border-slate-200 bg-white shadow-2xl shadow-slate-950/10 dark:border-white/10 dark:bg-slate-950 dark:shadow-black/30 &#123;class&#125;&quot;
+        &gt;
+            &lt;div class=&quot;mx-auto max-w-7xl px-6 py-8 lg:px-10&quot;&gt;
+                &lt;div class=&quot;grid gap-8 lg:grid-cols-[minmax(0,1.55fr)_minmax(18rem,0.8fr)]&quot;&gt;
+
+                    &lt;!-- Resource links --&gt;
+                    &lt;section&gt;
+                        &lt;div class=&quot;mb-5 flex items-end justify-between gap-6&quot;&gt;
+                            &lt;div&gt;
+                                &lt;p class=&quot;text-xs font-semibold uppercase tracking-[0.16em] text-indigo-600 dark:text-indigo-400&quot;&gt;
+                                    Resources
+                                &lt;/p&gt;
+
+                                &lt;h2 class=&quot;mt-2 text-lg font-bold tracking-tight text-slate-950 dark:text-white&quot;&gt;
+                                    Learn, build, and get support
+                                &lt;/h2&gt;
+
+                                &lt;p class=&quot;mt-1 text-sm text-slate-500 dark:text-slate-400&quot;&gt;
+                                    Explore practical guides, customer stories, product updates,
+                                    and security resources.
+                                &lt;/p&gt;
+                            &lt;/div&gt;
+
+                            &lt;a
+                                href=&quot;/resources&quot;
+                                class=&quot;group hidden items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 xl:inline-flex&quot;
+                            &gt;
+                                View all resources
+
+                                &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/a&gt;
+                        &lt;/div&gt;
+
+                        &lt;div class=&quot;grid gap-2 md:grid-cols-2&quot;&gt;
+
+                            &lt;!-- Blog --&gt;
+                            &lt;a
+                                href=&quot;/blog&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-indigo-200 hover:bg-indigo-50 dark:hover:border-indigo-500/20 dark:hover:bg-indigo-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-indigo-100 text-indigo-700 transition group-hover:bg-indigo-600 group-hover:text-white dark:bg-indigo-500/15 dark:text-indigo-300 dark:group-hover:bg-indigo-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--newspaper] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            Blog
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-indigo-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-indigo-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Product updates, engineering insights, identity trends, and
+                                        company news.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;!-- Customer stories --&gt;
+                            &lt;a
+                                href=&quot;/customers&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-violet-200 hover:bg-violet-50 dark:hover:border-violet-500/20 dark:hover:bg-violet-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-violet-100 text-violet-700 transition group-hover:bg-violet-600 group-hover:text-white dark:bg-violet-500/15 dark:text-violet-300 dark:group-hover:bg-violet-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--users-round] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            Customer stories
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-violet-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-violet-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        See how teams use WRNexusJS to secure and scale their
+                                        applications.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;!-- Guides --&gt;
+                            &lt;a
+                                href=&quot;/guides&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-cyan-200 hover:bg-cyan-50 dark:hover:border-cyan-500/20 dark:hover:bg-cyan-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-cyan-100 text-cyan-700 transition group-hover:bg-cyan-600 group-hover:text-white dark:bg-cyan-500/15 dark:text-cyan-300 dark:group-hover:bg-cyan-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--book-marked] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            Guides
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-cyan-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-cyan-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Practical identity, security, SaaS, and architecture
+                                        walkthroughs.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;!-- Help center --&gt;
+                            &lt;a
+                                href=&quot;/help&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-emerald-200 hover:bg-emerald-50 dark:hover:border-emerald-500/20 dark:hover:bg-emerald-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-emerald-100 text-emerald-700 transition group-hover:bg-emerald-600 group-hover:text-white dark:bg-emerald-500/15 dark:text-emerald-300 dark:group-hover:bg-emerald-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--circle-help] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            Help center
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-emerald-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-emerald-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Find answers for account, workspace, billing, and security
+                                        questions.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;!-- Security --&gt;
+                            &lt;a
+                                href=&quot;/security&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-amber-200 hover:bg-amber-50 dark:hover:border-amber-500/20 dark:hover:bg-amber-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-amber-100 text-amber-700 transition group-hover:bg-amber-600 group-hover:text-white dark:bg-amber-500/15 dark:text-amber-300 dark:group-hover:bg-amber-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--shield-check] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            Security
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-amber-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-amber-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Learn how WRNexusJS protects accounts, sessions, and
+                                        organizations.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;!-- Trust center --&gt;
+                            &lt;a
+                                href=&quot;/trust&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-rose-200 hover:bg-rose-50 dark:hover:border-rose-500/20 dark:hover:bg-rose-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-rose-100 text-rose-700 transition group-hover:bg-rose-600 group-hover:text-white dark:bg-rose-500/15 dark:text-rose-300 dark:group-hover:bg-rose-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--badge-check] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            Trust center
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-rose-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-rose-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Review compliance, privacy, infrastructure, and operational
+                                        controls.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+                        &lt;/div&gt;
+
+                        &lt;a
+                            href=&quot;/resources&quot;
+                            class=&quot;mt-4 flex items-center justify-center gap-2 rounded-xl border border-indigo-200 bg-indigo-50 px-4 py-3 text-sm font-semibold text-indigo-700 transition hover:border-indigo-300 hover:bg-indigo-100 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/15 xl:hidden&quot;
+                        &gt;
+                            View all resources
+
+                            &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                        &lt;/a&gt;
+                    &lt;/section&gt;
+
+                    &lt;!-- Featured resource --&gt;
+                    &lt;aside
+                        class=&quot;relative overflow-hidden rounded-3xl border border-indigo-200 bg-linear-to-br from-indigo-50 via-white to-cyan-50 p-6 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-cyan-500/10&quot;
+                    &gt;
+                        &lt;div aria-hidden=&quot;true&quot; class=&quot;absolute -right-16 -top-16 h-40 w-40 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10&quot; &gt;&lt;/div&gt;
+
+                        &lt;div aria-hidden=&quot;true&quot; class=&quot;absolute -bottom-20 -left-16 h-40 w-40 rounded-full bg-cyan-300/30 blur-3xl dark:bg-cyan-500/10&quot; &gt;&lt;/div&gt;
+
+                        &lt;div class=&quot;relative&quot;&gt;
+                            &lt;span
+                                class=&quot;inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-white/80 px-3 py-1.5 text-xs font-semibold text-indigo-700 backdrop-blur-sm dark:border-indigo-500/20 dark:bg-white/5 dark:text-indigo-300&quot;
+                            &gt;
+                                &lt;span class=&quot;icon-[lucide--sparkles] h-3.5 w-3.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                Featured guide
+                            &lt;/span&gt;
+
+                            &lt;div
+                                class=&quot;mt-5 grid h-12 w-12 place-items-center rounded-2xl bg-indigo-600 text-white shadow-lg shadow-indigo-600/20&quot;
+                            &gt;
+                                &lt;span class=&quot;icon-[lucide--book-open-check] h-6 w-6&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/div&gt;
+
+                            &lt;h3 class=&quot;mt-5 text-xl font-bold tracking-tight text-slate-950 dark:text-white&quot;&gt;
+                                The modern SaaS identity checklist
+                            &lt;/h3&gt;
+
+                            &lt;p class=&quot;mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400&quot;&gt;
+                                A practical checklist covering authentication, organizations,
+                                permissions, MFA, recovery, sessions, and enterprise SSO.
+                            &lt;/p&gt;
+
+                            &lt;div class=&quot;mt-5 space-y-3&quot;&gt;
+                                &lt;div class=&quot;flex items-center gap-3&quot;&gt;
+                                    &lt;span
+                                        class=&quot;grid h-7 w-7 shrink-0 place-items-center rounded-full bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300&quot;
+                                    &gt;
+                                        &lt;span class=&quot;icon-[lucide--check] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;text-sm text-slate-700 dark:text-slate-300&quot;&gt;
+                                        Secure authentication foundations
+                                    &lt;/span&gt;
+                                &lt;/div&gt;
+
+                                &lt;div class=&quot;flex items-center gap-3&quot;&gt;
+                                    &lt;span
+                                        class=&quot;grid h-7 w-7 shrink-0 place-items-center rounded-full bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300&quot;
+                                    &gt;
+                                        &lt;span class=&quot;icon-[lucide--check] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;text-sm text-slate-700 dark:text-slate-300&quot;&gt;
+                                        Multi-tenant organization design
+                                    &lt;/span&gt;
+                                &lt;/div&gt;
+
+                                &lt;div class=&quot;flex items-center gap-3&quot;&gt;
+                                    &lt;span
+                                        class=&quot;grid h-7 w-7 shrink-0 place-items-center rounded-full bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300&quot;
+                                    &gt;
+                                        &lt;span class=&quot;icon-[lucide--check] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;text-sm text-slate-700 dark:text-slate-300&quot;&gt;
+                                        Recovery and account protection
+                                    &lt;/span&gt;
+                                &lt;/div&gt;
+                            &lt;/div&gt;
+
+                            &lt;a
+                                href=&quot;/guides/saas-identity-checklist&quot;
+                                class=&quot;group mt-6 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900&quot;
+                            &gt;
+                                Read the guide
+
+                                &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;div class=&quot;mt-4 flex items-center justify-center gap-4 text-xs text-slate-500 dark:text-slate-400&quot;&gt;
+                                &lt;span class=&quot;inline-flex items-center gap-1.5&quot;&gt;
+                                    &lt;span class=&quot;icon-[lucide--clock-3] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                    12 min read
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;inline-flex items-center gap-1.5&quot;&gt;
+                                    &lt;span class=&quot;icon-[lucide--download] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                    PDF available
+                                &lt;/span&gt;
+                            &lt;/div&gt;
+                        &lt;/div&gt;
+                    &lt;/aside&gt;
+                &lt;/div&gt;
+
+                &lt;!-- Bottom resource links --&gt;
+                &lt;div
+                    class=&quot;mt-7 flex flex-wrap items-center justify-between gap-4 border-t border-slate-200 pt-5 dark:border-white/10&quot;
+                &gt;
+                    &lt;div class=&quot;flex flex-wrap items-center gap-x-6 gap-y-3&quot;&gt;
+                        &lt;a
+                            href=&quot;/webinars&quot;
+                            class=&quot;inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300&quot;
+                        &gt;
+                            &lt;span class=&quot;icon-[lucide--presentation] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                            Webinars
+                        &lt;/a&gt;
+
+                        &lt;a
+                            href=&quot;/events&quot;
+                            class=&quot;inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300&quot;
+                        &gt;
+                            &lt;span class=&quot;icon-[lucide--calendar-days] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                            Events
+                        &lt;/a&gt;
+
+                        &lt;a
+                            href=&quot;/reports&quot;
+                            class=&quot;inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300&quot;
+                        &gt;
+                            &lt;span class=&quot;icon-[lucide--file-chart-column] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                            Reports
+                        &lt;/a&gt;
+
+                        &lt;a
+                            href=&quot;/newsletter&quot;
+                            class=&quot;inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300&quot;
+                        &gt;
+                            &lt;span class=&quot;icon-[lucide--mail-plus] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                            Newsletter
+                        &lt;/a&gt;
+                    &lt;/div&gt;
+
+                    &lt;a
+                        href=&quot;/contact&quot;
+                        class=&quot;group inline-flex items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300&quot;
+                    &gt;
+                        Contact our team
+
+                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/a&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/response-viewer.wrn b/app/pages/components/response-viewer.wrn
new file mode 100644
index 00000000..6fa8819d
--- /dev/null
+++ b/app/pages/components/response-viewer.wrn
@@ -0,0 +1,34 @@
+page ResponseViewercomponent {
+  seo {
+    title = "ResponseViewer component"
+    description = "Reusable response viewer component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ResponseViewer</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ResponseViewer</h1><p>Reusable response viewer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ResponseViewer eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ResponseViewer&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ResponseViewer.wrn</code></p><pre data-language="wrn"><code>component ResponseViewer &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/responsible-disclosure-cta.wrn b/app/pages/components/responsible-disclosure-cta.wrn
new file mode 100644
index 00000000..cdc8346d
--- /dev/null
+++ b/app/pages/components/responsible-disclosure-cta.wrn
@@ -0,0 +1,32 @@
+page ResponsibleDisclosureCTAcomponent {
+  seo {
+    title = "ResponsibleDisclosureCTA component"
+    description = "Reusable responsible disclosure c t a component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ResponsibleDisclosureCTA</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>ResponsibleDisclosureCTA</h1><p>Reusable responsible disclosure c t a component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ResponsibleDisclosureCTA label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ResponsibleDisclosureCTA&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ResponsibleDisclosureCTA.wrn</code></p><pre data-language="wrn"><code>component ResponsibleDisclosureCTA &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/responsive-table.wrn b/app/pages/components/responsive-table.wrn
new file mode 100644
index 00000000..7b68a5cb
--- /dev/null
+++ b/app/pages/components/responsive-table.wrn
@@ -0,0 +1,31 @@
+page ResponsiveTablecomponent {
+  seo {
+    title = "ResponsiveTable component"
+    description = "Reusable responsive table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ResponsiveTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ResponsiveTable</h1><p>Reusable responsive table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ResponsiveTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ResponsiveTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ResponsiveTable.wrn</code></p><pre data-language="wrn"><code>component ResponsiveTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/results-section.wrn b/app/pages/components/results-section.wrn
new file mode 100644
index 00000000..76320eb8
--- /dev/null
+++ b/app/pages/components/results-section.wrn
@@ -0,0 +1,31 @@
+page ResultsSectioncomponent {
+  seo {
+    title = "ResultsSection component"
+    description = "Reusable results section component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ResultsSection</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ResultsSection</h1><p>Reusable results section component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ResultsSection eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ResultsSection&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ResultsSection.wrn</code></p><pre data-language="wrn"><code>component ResultsSection &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/retention-table.wrn b/app/pages/components/retention-table.wrn
new file mode 100644
index 00000000..95d3288f
--- /dev/null
+++ b/app/pages/components/retention-table.wrn
@@ -0,0 +1,31 @@
+page RetentionTablecomponent {
+  seo {
+    title = "RetentionTable component"
+    description = "Reusable retention table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RetentionTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>RetentionTable</h1><p>Reusable retention table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RetentionTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RetentionTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RetentionTable.wrn</code></p><pre data-language="wrn"><code>component RetentionTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/retry-count-input.wrn b/app/pages/components/retry-count-input.wrn
new file mode 100644
index 00000000..f01a3680
--- /dev/null
+++ b/app/pages/components/retry-count-input.wrn
@@ -0,0 +1,37 @@
+page RetryCountInputcomponent {
+  seo {
+    title = "RetryCountInput component"
+    description = "Reusable retry count input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RetryCountInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>RetryCountInput</h1><p>Reusable retry count input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RetryCountInput label=&quot;RetryCount&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RetryCountInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;RetryCount&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RetryCountInput.wrn</code></p><pre data-language="wrn"><code>component RetryCountInput &#123;
+  props &#123;
+    label = &quot;RetryCount&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/revenue-chart.wrn b/app/pages/components/revenue-chart.wrn
new file mode 100644
index 00000000..029f90fd
--- /dev/null
+++ b/app/pages/components/revenue-chart.wrn
@@ -0,0 +1,32 @@
+page RevenueChartcomponent {
+  seo {
+    title = "RevenueChart component"
+    description = "Reusable revenue chart component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RevenueChart</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>RevenueChart</h1><p>Reusable revenue chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RevenueChart title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RevenueChart&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RevenueChart.wrn</code></p><pre data-language="wrn"><code>component RevenueChart &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/rgb-color-input.wrn b/app/pages/components/rgb-color-input.wrn
new file mode 100644
index 00000000..f5635173
--- /dev/null
+++ b/app/pages/components/rgb-color-input.wrn
@@ -0,0 +1,37 @@
+page RgbColorInputcomponent {
+  seo {
+    title = "RgbColorInput component"
+    description = "Reusable rgb color input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RgbColorInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>RgbColorInput</h1><p>Reusable rgb color input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RgbColorInput label=&quot;RgbColor&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RgbColorInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;RgbColor&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RgbColorInput.wrn</code></p><pre data-language="wrn"><code>component RgbColorInput &#123;
+  props &#123;
+    label = &quot;RgbColor&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/rich-text-editor.wrn b/app/pages/components/rich-text-editor.wrn
new file mode 100644
index 00000000..51442d0c
--- /dev/null
+++ b/app/pages/components/rich-text-editor.wrn
@@ -0,0 +1,37 @@
+page RichTextEditorcomponent {
+  seo {
+    title = "RichTextEditor component"
+    description = "Reusable rich text editor component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RichTextEditor</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>RichTextEditor</h1><p>Reusable rich text editor component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RichTextEditor label=&quot;RichText&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RichTextEditor&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;RichText&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RichTextEditor.wrn</code></p><pre data-language="wrn"><code>component RichTextEditor &#123;
+  props &#123;
+    label = &quot;RichText&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/rich-text-input.wrn b/app/pages/components/rich-text-input.wrn
new file mode 100644
index 00000000..d1b002f1
--- /dev/null
+++ b/app/pages/components/rich-text-input.wrn
@@ -0,0 +1,37 @@
+page RichTextInputcomponent {
+  seo {
+    title = "RichTextInput component"
+    description = "Reusable rich text input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RichTextInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>RichTextInput</h1><p>Reusable rich text input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RichTextInput label=&quot;RichText&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RichTextInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;RichText&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RichTextInput.wrn</code></p><pre data-language="wrn"><code>component RichTextInput &#123;
+  props &#123;
+    label = &quot;RichText&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/role-selector.wrn b/app/pages/components/role-selector.wrn
new file mode 100644
index 00000000..4846b716
--- /dev/null
+++ b/app/pages/components/role-selector.wrn
@@ -0,0 +1,37 @@
+page RoleSelectorcomponent {
+  seo {
+    title = "RoleSelector component"
+    description = "Reusable role selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RoleSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>RoleSelector</h1><p>Reusable role selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RoleSelector label=&quot;Role&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RoleSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Role&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RoleSelector.wrn</code></p><pre data-language="wrn"><code>component RoleSelector &#123;
+  props &#123;
+    label = &quot;Role&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/rolling-date-range-picker.wrn b/app/pages/components/rolling-date-range-picker.wrn
new file mode 100644
index 00000000..380fac37
--- /dev/null
+++ b/app/pages/components/rolling-date-range-picker.wrn
@@ -0,0 +1,37 @@
+page RollingDateRangePickercomponent {
+  seo {
+    title = "RollingDateRangePicker component"
+    description = "Reusable rolling date range picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RollingDateRangePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>RollingDateRangePicker</h1><p>Reusable rolling date range picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;RollingDateRangePicker label=&quot;RollingDateRange&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;RollingDateRangePicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;RollingDateRange&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RollingDateRangePicker.wrn</code></p><pre data-language="wrn"><code>component RollingDateRangePicker &#123;
+  props &#123;
+    label = &quot;RollingDateRange&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/save-cookie-preferences-button.wrn b/app/pages/components/save-cookie-preferences-button.wrn
new file mode 100644
index 00000000..00b74d97
--- /dev/null
+++ b/app/pages/components/save-cookie-preferences-button.wrn
@@ -0,0 +1,32 @@
+page SaveCookiePreferencesButtoncomponent {
+  seo {
+    title = "SaveCookiePreferencesButton component"
+    description = "Reusable save cookie preferences button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SaveCookiePreferencesButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>SaveCookiePreferencesButton</h1><p>Reusable save cookie preferences button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SaveCookiePreferencesButton label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SaveCookiePreferencesButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SaveCookiePreferencesButton.wrn</code></p><pre data-language="wrn"><code>component SaveCookiePreferencesButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/saved-filter-selector.wrn b/app/pages/components/saved-filter-selector.wrn
new file mode 100644
index 00000000..28a0cc62
--- /dev/null
+++ b/app/pages/components/saved-filter-selector.wrn
@@ -0,0 +1,37 @@
+page SavedFilterSelectorcomponent {
+  seo {
+    title = "SavedFilterSelector component"
+    description = "Reusable saved filter selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SavedFilterSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>SavedFilterSelector</h1><p>Reusable saved filter selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SavedFilterSelector label=&quot;SavedFilter&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SavedFilterSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;SavedFilter&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SavedFilterSelector.wrn</code></p><pre data-language="wrn"><code>component SavedFilterSelector &#123;
+  props &#123;
+    label = &quot;SavedFilter&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/schedule-message-picker.wrn b/app/pages/components/schedule-message-picker.wrn
new file mode 100644
index 00000000..32e8e20c
--- /dev/null
+++ b/app/pages/components/schedule-message-picker.wrn
@@ -0,0 +1,37 @@
+page ScheduleMessagePickercomponent {
+  seo {
+    title = "ScheduleMessagePicker component"
+    description = "Reusable schedule message picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ScheduleMessagePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ScheduleMessagePicker</h1><p>Reusable schedule message picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ScheduleMessagePicker label=&quot;ScheduleMessage&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ScheduleMessagePicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;ScheduleMessage&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ScheduleMessagePicker.wrn</code></p><pre data-language="wrn"><code>component ScheduleMessagePicker &#123;
+  props &#123;
+    label = &quot;ScheduleMessage&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/schedule-picker.wrn b/app/pages/components/schedule-picker.wrn
new file mode 100644
index 00000000..61a004b5
--- /dev/null
+++ b/app/pages/components/schedule-picker.wrn
@@ -0,0 +1,30 @@
+page SchedulePickercomponent {
+  seo {
+    title = "SchedulePicker component"
+    description = "Reusable schedule picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SchedulePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>SchedulePicker</h1><p>Reusable schedule picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>2 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SchedulePicker label=&quot;Schedule&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SchedulePicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Schedule&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SchedulePicker.wrn</code></p><pre data-language="wrn"><code>component SchedulePicker &#123;
+  props &#123;
+    class = &quot;&quot;
+    label = &quot;Schedule&quot;
+  &#125;
+  view &#123;
+    &lt;fieldset class=&quot;space-y-4 rounded-2xl border border-slate-200 p-5 dark:border-slate-800 &#123;class&#125;&quot;&gt;&lt;legend class=&quot;px-2 font-semibold&quot;&gt;&#123;label&#125;&lt;/legend&gt;&lt;DateTimeInput id=&quot;scheduleAt&quot; name=&quot;scheduleAt&quot; label=&quot;Date and time&quot; /&gt;&lt;TimezoneSelector /&gt;&lt;/fieldset&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/scheduled-date-time-picker.wrn b/app/pages/components/scheduled-date-time-picker.wrn
new file mode 100644
index 00000000..8629e3b6
--- /dev/null
+++ b/app/pages/components/scheduled-date-time-picker.wrn
@@ -0,0 +1,37 @@
+page ScheduledDateTimePickercomponent {
+  seo {
+    title = "ScheduledDateTimePicker component"
+    description = "Reusable scheduled date time picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ScheduledDateTimePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ScheduledDateTimePicker</h1><p>Reusable scheduled date time picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ScheduledDateTimePicker label=&quot;ScheduledDateTime&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ScheduledDateTimePicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;ScheduledDateTime&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ScheduledDateTimePicker.wrn</code></p><pre data-language="wrn"><code>component ScheduledDateTimePicker &#123;
+  props &#123;
+    label = &quot;ScheduledDateTime&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/screenshot-frame.wrn b/app/pages/components/screenshot-frame.wrn
new file mode 100644
index 00000000..b20b0928
--- /dev/null
+++ b/app/pages/components/screenshot-frame.wrn
@@ -0,0 +1,31 @@
+page ScreenshotFramecomponent {
+  seo {
+    title = "ScreenshotFrame component"
+    description = "Reusable screenshot frame component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ScreenshotFrame</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ScreenshotFrame</h1><p>Reusable screenshot frame component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ScreenshotFrame eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ScreenshotFrame&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ScreenshotFrame.wrn</code></p><pre data-language="wrn"><code>component ScreenshotFrame &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/scroll-area.wrn b/app/pages/components/scroll-area.wrn
new file mode 100644
index 00000000..12d6525a
--- /dev/null
+++ b/app/pages/components/scroll-area.wrn
@@ -0,0 +1,27 @@
+page ScrollAreacomponent {
+  seo {
+    title = "ScrollArea component"
+    description = "Reusable scroll area component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ScrollArea</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>ScrollArea</h1><p>Reusable scroll area component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ScrollArea /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ScrollArea&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ScrollArea.wrn</code></p><pre data-language="wrn"><code>component ScrollArea &#123;
+  props &#123;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-scroll-area &#123;class&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/sdk-language-selector.wrn b/app/pages/components/sdk-language-selector.wrn
new file mode 100644
index 00000000..06cb7fd4
--- /dev/null
+++ b/app/pages/components/sdk-language-selector.wrn
@@ -0,0 +1,37 @@
+page SdkLanguageSelectorcomponent {
+  seo {
+    title = "SdkLanguageSelector component"
+    description = "Reusable sdk language selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SdkLanguageSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>SdkLanguageSelector</h1><p>Reusable sdk language selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SdkLanguageSelector label=&quot;SdkLanguage&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SdkLanguageSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;SdkLanguage&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SdkLanguageSelector.wrn</code></p><pre data-language="wrn"><code>component SdkLanguageSelector &#123;
+  props &#123;
+    label = &quot;SdkLanguage&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/sdkcard.wrn b/app/pages/components/sdkcard.wrn
new file mode 100644
index 00000000..d123425d
--- /dev/null
+++ b/app/pages/components/sdkcard.wrn
@@ -0,0 +1,34 @@
+page SDKCardcomponent {
+  seo {
+    title = "SDKCard component"
+    description = "Reusable s d k card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SDKCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>SDKCard</h1><p>Reusable s d k card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SDKCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SDKCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SDKCard.wrn</code></p><pre data-language="wrn"><code>component SDKCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/sdklanguage-tabs.wrn b/app/pages/components/sdklanguage-tabs.wrn
new file mode 100644
index 00000000..3df8a7d7
--- /dev/null
+++ b/app/pages/components/sdklanguage-tabs.wrn
@@ -0,0 +1,34 @@
+page SDKLanguageTabscomponent {
+  seo {
+    title = "SDKLanguageTabs component"
+    description = "Reusable s d k language tabs component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SDKLanguageTabs</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>SDKLanguageTabs</h1><p>Reusable s d k language tabs component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SDKLanguageTabs eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SDKLanguageTabs&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SDKLanguageTabs.wrn</code></p><pre data-language="wrn"><code>component SDKLanguageTabs &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/sdktabs.wrn b/app/pages/components/sdktabs.wrn
new file mode 100644
index 00000000..5489b78a
--- /dev/null
+++ b/app/pages/components/sdktabs.wrn
@@ -0,0 +1,31 @@
+page SDKTabscomponent {
+  seo {
+    title = "SDKTabs component"
+    description = "Reusable sdktabs component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SDKTabs</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>SDKTabs</h1><p>Reusable sdktabs component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>0 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SDKTabs label=&quot;SDK languages&quot; tabs=&quot;[]&quot; defaultIndex=&quot;0&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SDKTabs&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;SDK languages&quot;</code></td></tr><tr><td><code>tabs</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>defaultIndex</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SDKTabs.wrn</code></p><pre data-language="wrn"><code>component SDKTabs &#123;
+  props &#123;
+    label = &quot;SDK languages&quot;
+    tabs = []
+    defaultIndex = 0
+    class = &quot;&quot;
+  &#125;
+  state active = defaultIndex
+  view &#123; &lt;section class=&quot;wire-sdk-tabs &#123;class&#125;&quot;&gt;&lt;div role=&quot;tablist&quot; aria-label=&quot;&#123;label&#125;&quot; class=&quot;wire-tabs&quot;&gt;&#123;#each tabs as tab, index&#125;&lt;button type=&quot;button&quot; role=&quot;tab&quot; aria-selected=&quot;&#123;active === index&#125;&quot; class=&quot;wire-tab&quot; @click=&quot;active = index&quot;&gt;&#123;tab.label&#125;&lt;/button&gt;&#123;/each&#125;&lt;/div&gt;&#123;#each tabs as tab, index&#125;&lt;div role=&quot;tabpanel&quot; data-show=&quot;active === index&quot; class=&quot;wire-sdk-tabs__panel&quot;&gt;&lt;pre&gt;&lt;code&gt;&#123;tab.code&#125;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&#123;/each&#125;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/search-button.wrn b/app/pages/components/search-button.wrn
new file mode 100644
index 00000000..94b733af
--- /dev/null
+++ b/app/pages/components/search-button.wrn
@@ -0,0 +1,32 @@
+page SearchButtoncomponent {
+  seo {
+    title = "SearchButton component"
+    description = "Reusable search button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SearchButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>SearchButton</h1><p>Reusable search button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SearchButton label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SearchButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SearchButton.wrn</code></p><pre data-language="wrn"><code>component SearchButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/search-category-tabs.wrn b/app/pages/components/search-category-tabs.wrn
new file mode 100644
index 00000000..6082db0d
--- /dev/null
+++ b/app/pages/components/search-category-tabs.wrn
@@ -0,0 +1,34 @@
+page SearchCategoryTabscomponent {
+  seo {
+    title = "SearchCategoryTabs component"
+    description = "Reusable search category tabs component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SearchCategoryTabs</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>SearchCategoryTabs</h1><p>Reusable search category tabs component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SearchCategoryTabs eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SearchCategoryTabs&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SearchCategoryTabs.wrn</code></p><pre data-language="wrn"><code>component SearchCategoryTabs &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/search-dialog.wrn b/app/pages/components/search-dialog.wrn
new file mode 100644
index 00000000..ac9c9618
--- /dev/null
+++ b/app/pages/components/search-dialog.wrn
@@ -0,0 +1,31 @@
+page SearchDialogcomponent {
+  seo {
+    title = "SearchDialog component"
+    description = "Reusable search dialog component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SearchDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>SearchDialog</h1><p>Reusable search dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SearchDialog title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SearchDialog&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SearchDialog.wrn</code></p><pre data-language="wrn"><code>component SearchDialog &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/search-empty-state.wrn b/app/pages/components/search-empty-state.wrn
new file mode 100644
index 00000000..7f12c95e
--- /dev/null
+++ b/app/pages/components/search-empty-state.wrn
@@ -0,0 +1,32 @@
+page SearchEmptyStatecomponent {
+  seo {
+    title = "SearchEmptyState component"
+    description = "Reusable search empty state component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SearchEmptyState</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>SearchEmptyState</h1><p>Reusable search empty state component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SearchEmptyState label=&quot;SearchEmpty&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SearchEmptyState&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;SearchEmpty&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SearchEmptyState.wrn</code></p><pre data-language="wrn"><code>component SearchEmptyState &#123;
+  props &#123;
+    label = &quot;SearchEmpty&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/search-input.wrn b/app/pages/components/search-input.wrn
new file mode 100644
index 00000000..f6e17269
--- /dev/null
+++ b/app/pages/components/search-input.wrn
@@ -0,0 +1,45 @@
+page SearchInputcomponent {
+  seo {
+    title = "SearchInput component"
+    description = "Reusable search input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SearchInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>SearchInput</h1><p>Reusable search input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>12 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SearchInput id=&quot;id&quot; name=&quot;name&quot; label=&quot;Search&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SearchInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Search&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>autocomplete</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SearchInput.wrn</code></p><pre data-language="wrn"><code>component SearchInput &#123;
+  props &#123;
+    class = &quot;&quot;
+    id = &quot;&quot;
+    name = &quot;&quot;
+    label = &quot;Search&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    help = &quot;&quot;
+    error = &quot;&quot;
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;space-y-2 &#123;class&#125;&quot;&gt;
+      &lt;label for=&quot;&#123;id&#125;&quot; class=&quot;block text-sm font-semibold text-slate-800 dark:text-slate-200&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;ml-1 text-red-500&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
+      &lt;input id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; type=&quot;search&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; autocomplete=&quot;&#123;autocomplete&#125;&quot; aria-invalid=&quot;&#123;!!error&#125;&quot; aria-describedby=&quot;&#123;id&#125;-help &#123;id&#125;-error&quot; class=&quot;min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white &#123;error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'&#125;&quot; /&gt;
+      &lt;p id=&quot;&#123;id&#125;-help&quot; data-show=&quot;help &amp;&amp; !error&quot; class=&quot;text-sm text-slate-500 dark:text-slate-400&quot;&gt;&#123;help&#125;&lt;/p&gt;
+      &lt;p id=&quot;&#123;id&#125;-error&quot; data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;text-sm font-medium text-red-600 dark:text-red-400&quot;&gt;&#123;error&#125;&lt;/p&gt;
+    &lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/search-loading-state.wrn b/app/pages/components/search-loading-state.wrn
new file mode 100644
index 00000000..ce37b77e
--- /dev/null
+++ b/app/pages/components/search-loading-state.wrn
@@ -0,0 +1,32 @@
+page SearchLoadingStatecomponent {
+  seo {
+    title = "SearchLoadingState component"
+    description = "Reusable search loading state component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SearchLoadingState</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>SearchLoadingState</h1><p>Reusable search loading state component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SearchLoadingState label=&quot;SearchLoading&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SearchLoadingState&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;SearchLoading&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SearchLoadingState.wrn</code></p><pre data-language="wrn"><code>component SearchLoadingState &#123;
+  props &#123;
+    label = &quot;SearchLoading&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/search-result-item.wrn b/app/pages/components/search-result-item.wrn
new file mode 100644
index 00000000..0a8a1136
--- /dev/null
+++ b/app/pages/components/search-result-item.wrn
@@ -0,0 +1,34 @@
+page SearchResultItemcomponent {
+  seo {
+    title = "SearchResultItem component"
+    description = "Reusable search result item component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SearchResultItem</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>SearchResultItem</h1><p>Reusable search result item component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SearchResultItem eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SearchResultItem&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SearchResultItem.wrn</code></p><pre data-language="wrn"><code>component SearchResultItem &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/second-picker.wrn b/app/pages/components/second-picker.wrn
new file mode 100644
index 00000000..dcc550db
--- /dev/null
+++ b/app/pages/components/second-picker.wrn
@@ -0,0 +1,37 @@
+page SecondPickercomponent {
+  seo {
+    title = "SecondPicker component"
+    description = "Reusable second picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SecondPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>SecondPicker</h1><p>Reusable second picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SecondPicker label=&quot;Second&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SecondPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Second&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SecondPicker.wrn</code></p><pre data-language="wrn"><code>component SecondPicker &#123;
+  props &#123;
+    label = &quot;Second&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/secondary-button.wrn b/app/pages/components/secondary-button.wrn
new file mode 100644
index 00000000..f2a425a1
--- /dev/null
+++ b/app/pages/components/secondary-button.wrn
@@ -0,0 +1,30 @@
+page SecondaryButtoncomponent {
+  seo {
+    title = "SecondaryButton component"
+    description = "Reusable secondary button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SecondaryButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>SecondaryButton</h1><p>Reusable secondary button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SecondaryButton label=&quot;Action&quot; type=&quot;button&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SecondaryButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SecondaryButton.wrn</code></p><pre data-language="wrn"><code>component SecondaryButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    type = &quot;button&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;button type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--default &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/secret-display.wrn b/app/pages/components/secret-display.wrn
new file mode 100644
index 00000000..88c85a93
--- /dev/null
+++ b/app/pages/components/secret-display.wrn
@@ -0,0 +1,34 @@
+page SecretDisplaycomponent {
+  seo {
+    title = "SecretDisplay component"
+    description = "Reusable secret display component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SecretDisplay</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>SecretDisplay</h1><p>Reusable secret display component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SecretDisplay eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SecretDisplay&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SecretDisplay.wrn</code></p><pre data-language="wrn"><code>component SecretDisplay &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/secret-input.wrn b/app/pages/components/secret-input.wrn
new file mode 100644
index 00000000..778a499c
--- /dev/null
+++ b/app/pages/components/secret-input.wrn
@@ -0,0 +1,37 @@
+page SecretInputcomponent {
+  seo {
+    title = "SecretInput component"
+    description = "Reusable secret input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SecretInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>SecretInput</h1><p>Reusable secret input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SecretInput label=&quot;Secret&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SecretInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Secret&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SecretInput.wrn</code></p><pre data-language="wrn"><code>component SecretInput &#123;
+  props &#123;
+    label = &quot;Secret&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/secret-reveal-dialog.wrn b/app/pages/components/secret-reveal-dialog.wrn
new file mode 100644
index 00000000..6deb1044
--- /dev/null
+++ b/app/pages/components/secret-reveal-dialog.wrn
@@ -0,0 +1,31 @@
+page SecretRevealDialogcomponent {
+  seo {
+    title = "SecretRevealDialog component"
+    description = "Reusable secret reveal dialog component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SecretRevealDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>SecretRevealDialog</h1><p>Reusable secret reveal dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SecretRevealDialog title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SecretRevealDialog&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SecretRevealDialog.wrn</code></p><pre data-language="wrn"><code>component SecretRevealDialog &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/section-actions.wrn b/app/pages/components/section-actions.wrn
new file mode 100644
index 00000000..48961c9e
--- /dev/null
+++ b/app/pages/components/section-actions.wrn
@@ -0,0 +1,32 @@
+page SectionActionscomponent {
+  seo {
+    title = "SectionActions component"
+    description = "Reusable section actions component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SectionActions</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>SectionActions</h1><p>Reusable section actions component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SectionActions label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SectionActions&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SectionActions.wrn</code></p><pre data-language="wrn"><code>component SectionActions &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/section-header.wrn b/app/pages/components/section-header.wrn
new file mode 100644
index 00000000..1201c3cc
--- /dev/null
+++ b/app/pages/components/section-header.wrn
@@ -0,0 +1,33 @@
+page SectionHeadercomponent {
+  seo {
+    title = "SectionHeader component"
+    description = "Reusable section header component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SectionHeader</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>SectionHeader</h1><p>Reusable section header component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SectionHeader eyebrow=&quot;eyebrow&quot; title=&quot;Section title&quot; description=&quot;description&quot; align=&quot;left&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SectionHeader&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Section title&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;left&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SectionHeader.wrn</code></p><pre data-language="wrn"><code>component SectionHeader &#123;
+  props &#123;
+    class = &quot;&quot;
+    eyebrow = &quot;&quot;
+    title = &quot;Section title&quot;
+    description = &quot;&quot;
+    align = &quot;left&quot;
+  &#125;
+  view &#123;
+    &lt;header class=&quot;max-w-3xl &#123;align === 'center' ? 'mx-auto text-center' : ''&#125; &#123;class&#125;&quot;&gt;&lt;p data-show=&quot;eyebrow&quot; class=&quot;mb-3 text-sm font-bold uppercase tracking-[0.18em] text-violet-600 dark:text-violet-400&quot;&gt;&#123;eyebrow&#125;&lt;/p&gt;&lt;h2 class=&quot;text-3xl font-bold tracking-tight text-slate-950 sm:text-4xl dark:text-white&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;mt-4 text-lg leading-8 text-slate-600 dark:text-slate-300&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;div class=&quot;mt-6&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;/header&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/section-heading.wrn b/app/pages/components/section-heading.wrn
new file mode 100644
index 00000000..0c9211bb
--- /dev/null
+++ b/app/pages/components/section-heading.wrn
@@ -0,0 +1,29 @@
+page SectionHeadingcomponent {
+  seo {
+    title = "SectionHeading component"
+    description = "Reusable section heading component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SectionHeading</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>SectionHeading</h1><p>Reusable section heading component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SectionHeading text=&quot;text&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SectionHeading&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>text</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SectionHeading.wrn</code></p><pre data-language="wrn"><code>component SectionHeading &#123;
+  props &#123;
+    text = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-type wire-type--heading wire-text--&#123;align&#125;  &#123;class&#125;&quot;&gt;&#123;text&#125;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/section.wrn b/app/pages/components/section.wrn
new file mode 100644
index 00000000..87ea34dd
--- /dev/null
+++ b/app/pages/components/section.wrn
@@ -0,0 +1,32 @@
+page Sectioncomponent {
+  seo {
+    title = "Section component"
+    description = "Reusable section component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Section</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Section</h1><p>Reusable section component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Section id=&quot;id&quot; size=&quot;default&quot; surface=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Section&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>surface</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>className</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Section.wrn</code></p><pre data-language="wrn"><code>component Section &#123;
+  props &#123;
+    id = &quot;&quot;
+    size = &quot;default&quot;
+    surface = &quot;default&quot;
+    className = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;section id=&quot;&#123;id&#125;&quot; class=&quot;&#123;size === 'compact' ? 'py-10 sm:py-14' : size === 'spacious' ? 'py-20 sm:py-28' : 'py-14 sm:py-20'&#125; &#123;surface === 'muted' ? 'bg-slate-50 dark:bg-slate-900/50' : surface === 'brand' ? 'bg-violet-600 text-white' : ''&#125; &#123;className&#125;&quot;&gt;&lt;slot /&gt;&lt;/section&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/security-alert.wrn b/app/pages/components/security-alert.wrn
new file mode 100644
index 00000000..3979834b
--- /dev/null
+++ b/app/pages/components/security-alert.wrn
@@ -0,0 +1,32 @@
+page SecurityAlertcomponent {
+  seo {
+    title = "SecurityAlert component"
+    description = "Reusable security alert component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SecurityAlert</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>SecurityAlert</h1><p>Reusable security alert component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SecurityAlert label=&quot;Security&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SecurityAlert&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Security&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SecurityAlert.wrn</code></p><pre data-language="wrn"><code>component SecurityAlert &#123;
+  props &#123;
+    label = &quot;Security&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/security-contact-card.wrn b/app/pages/components/security-contact-card.wrn
new file mode 100644
index 00000000..b58515a8
--- /dev/null
+++ b/app/pages/components/security-contact-card.wrn
@@ -0,0 +1,34 @@
+page SecurityContactCardcomponent {
+  seo {
+    title = "SecurityContactCard component"
+    description = "Reusable security contact card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SecurityContactCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>SecurityContactCard</h1><p>Reusable security contact card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SecurityContactCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SecurityContactCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SecurityContactCard.wrn</code></p><pre data-language="wrn"><code>component SecurityContactCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/security-feature-card.wrn b/app/pages/components/security-feature-card.wrn
new file mode 100644
index 00000000..300ac370
--- /dev/null
+++ b/app/pages/components/security-feature-card.wrn
@@ -0,0 +1,34 @@
+page SecurityFeatureCardcomponent {
+  seo {
+    title = "SecurityFeatureCard component"
+    description = "Reusable security feature card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SecurityFeatureCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>SecurityFeatureCard</h1><p>Reusable security feature card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SecurityFeatureCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SecurityFeatureCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SecurityFeatureCard.wrn</code></p><pre data-language="wrn"><code>component SecurityFeatureCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/security-hero.wrn b/app/pages/components/security-hero.wrn
new file mode 100644
index 00000000..911fe376
--- /dev/null
+++ b/app/pages/components/security-hero.wrn
@@ -0,0 +1,31 @@
+page SecurityHerocomponent {
+  seo {
+    title = "SecurityHero component"
+    description = "Reusable security hero component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SecurityHero</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>SecurityHero</h1><p>Reusable security hero component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SecurityHero eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SecurityHero&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SecurityHero.wrn</code></p><pre data-language="wrn"><code>component SecurityHero &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/security-pillar-grid.wrn b/app/pages/components/security-pillar-grid.wrn
new file mode 100644
index 00000000..7aa5ee36
--- /dev/null
+++ b/app/pages/components/security-pillar-grid.wrn
@@ -0,0 +1,31 @@
+page SecurityPillarGridcomponent {
+  seo {
+    title = "SecurityPillarGrid component"
+    description = "Reusable security pillar grid component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SecurityPillarGrid</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>SecurityPillarGrid</h1><p>Reusable security pillar grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SecurityPillarGrid title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SecurityPillarGrid&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SecurityPillarGrid.wrn</code></p><pre data-language="wrn"><code>component SecurityPillarGrid &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/security-practice-list.wrn b/app/pages/components/security-practice-list.wrn
new file mode 100644
index 00000000..1dfddcfd
--- /dev/null
+++ b/app/pages/components/security-practice-list.wrn
@@ -0,0 +1,31 @@
+page SecurityPracticeListcomponent {
+  seo {
+    title = "SecurityPracticeList component"
+    description = "Reusable security practice list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SecurityPracticeList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>SecurityPracticeList</h1><p>Reusable security practice list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SecurityPracticeList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SecurityPracticeList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SecurityPracticeList.wrn</code></p><pre data-language="wrn"><code>component SecurityPracticeList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/security-report-form.wrn b/app/pages/components/security-report-form.wrn
new file mode 100644
index 00000000..08642b1c
--- /dev/null
+++ b/app/pages/components/security-report-form.wrn
@@ -0,0 +1,34 @@
+page SecurityReportFormcomponent {
+  seo {
+    title = "SecurityReportForm component"
+    description = "Reusable security report form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SecurityReportForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>SecurityReportForm</h1><p>Reusable security report form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SecurityReportForm eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SecurityReportForm&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SecurityReportForm.wrn</code></p><pre data-language="wrn"><code>component SecurityReportForm &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/select.wrn b/app/pages/components/select.wrn
new file mode 100644
index 00000000..b5b5cc43
--- /dev/null
+++ b/app/pages/components/select.wrn
@@ -0,0 +1,36 @@
+page Selectcomponent {
+  seo {
+    title = "Select component"
+    description = "Reusable select component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Select</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Select</h1><p>Reusable select component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Select id=&quot;id&quot; name=&quot;name&quot; label=&quot;Select&quot; help=&quot;help&quot; error=&quot;error&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Select&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Select&quot;</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Select.wrn</code></p><pre data-language="wrn"><code>component Select &#123;
+  props &#123;
+    class = &quot;&quot;
+    id = &quot;&quot;
+    name = &quot;&quot;
+    label = &quot;Select&quot;
+    help = &quot;&quot;
+    error = &quot;&quot;
+    required = false
+    disabled = false
+  &#125;
+  view &#123;
+    &lt;div class=&quot;space-y-2 &#123;class&#125;&quot;&gt;&lt;label for=&quot;&#123;id&#125;&quot; class=&quot;block text-sm font-semibold text-slate-800 dark:text-slate-200&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;ml-1 text-red-500&quot;&gt;*&lt;/span&gt;&lt;/label&gt;&lt;select id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;min-h-11 w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 dark:border-slate-700 dark:bg-slate-950 dark:text-white&quot;&gt;&lt;slot /&gt;&lt;/select&gt;&lt;p data-show=&quot;help &amp;&amp; !error&quot; class=&quot;text-sm text-slate-500&quot;&gt;&#123;help&#125;&lt;/p&gt;&lt;p data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;text-sm font-medium text-red-600&quot;&gt;&#123;error&#125;&lt;/p&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/sender-id-input.wrn b/app/pages/components/sender-id-input.wrn
new file mode 100644
index 00000000..41f70110
--- /dev/null
+++ b/app/pages/components/sender-id-input.wrn
@@ -0,0 +1,37 @@
+page SenderIdInputcomponent {
+  seo {
+    title = "SenderIdInput component"
+    description = "Reusable sender id input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SenderIdInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>SenderIdInput</h1><p>Reusable sender id input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SenderIdInput label=&quot;SenderId&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SenderIdInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;SenderId&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SenderIdInput.wrn</code></p><pre data-language="wrn"><code>component SenderIdInput &#123;
+  props &#123;
+    label = &quot;SenderId&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/server-error-page.wrn b/app/pages/components/server-error-page.wrn
new file mode 100644
index 00000000..bf80be6d
--- /dev/null
+++ b/app/pages/components/server-error-page.wrn
@@ -0,0 +1,34 @@
+page ServerErrorPagecomponent {
+  seo {
+    title = "ServerErrorPage component"
+    description = "Reusable server error page component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ServerErrorPage</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ServerErrorPage</h1><p>Reusable server error page component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ServerErrorPage eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ServerErrorPage&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ServerErrorPage.wrn</code></p><pre data-language="wrn"><code>component ServerErrorPage &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/service-level-table.wrn b/app/pages/components/service-level-table.wrn
new file mode 100644
index 00000000..ad75c741
--- /dev/null
+++ b/app/pages/components/service-level-table.wrn
@@ -0,0 +1,31 @@
+page ServiceLevelTablecomponent {
+  seo {
+    title = "ServiceLevelTable component"
+    description = "Reusable service level table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ServiceLevelTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ServiceLevelTable</h1><p>Reusable service level table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ServiceLevelTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ServiceLevelTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ServiceLevelTable.wrn</code></p><pre data-language="wrn"><code>component ServiceLevelTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/service-status-badge.wrn b/app/pages/components/service-status-badge.wrn
new file mode 100644
index 00000000..815e26b8
--- /dev/null
+++ b/app/pages/components/service-status-badge.wrn
@@ -0,0 +1,32 @@
+page ServiceStatusBadgecomponent {
+  seo {
+    title = "ServiceStatusBadge component"
+    description = "Reusable service status badge component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ServiceStatusBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>ServiceStatusBadge</h1><p>Reusable service status badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ServiceStatusBadge label=&quot;ServiceStatus&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ServiceStatusBadge&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;ServiceStatus&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ServiceStatusBadge.wrn</code></p><pre data-language="wrn"><code>component ServiceStatusBadge &#123;
+  props &#123;
+    label = &quot;ServiceStatus&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/service-status-list.wrn b/app/pages/components/service-status-list.wrn
new file mode 100644
index 00000000..b9471c44
--- /dev/null
+++ b/app/pages/components/service-status-list.wrn
@@ -0,0 +1,31 @@
+page ServiceStatusListcomponent {
+  seo {
+    title = "ServiceStatusList component"
+    description = "Reusable service status list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ServiceStatusList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ServiceStatusList</h1><p>Reusable service status list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ServiceStatusList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ServiceStatusList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ServiceStatusList.wrn</code></p><pre data-language="wrn"><code>component ServiceStatusList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/service-status-row.wrn b/app/pages/components/service-status-row.wrn
new file mode 100644
index 00000000..fce557b3
--- /dev/null
+++ b/app/pages/components/service-status-row.wrn
@@ -0,0 +1,31 @@
+page ServiceStatusRowcomponent {
+  seo {
+    title = "ServiceStatusRow component"
+    description = "Reusable service status row component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ServiceStatusRow</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ServiceStatusRow</h1><p>Reusable service status row component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ServiceStatusRow title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ServiceStatusRow&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ServiceStatusRow.wrn</code></p><pre data-language="wrn"><code>component ServiceStatusRow &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/session-card.wrn b/app/pages/components/session-card.wrn
new file mode 100644
index 00000000..0c6fb403
--- /dev/null
+++ b/app/pages/components/session-card.wrn
@@ -0,0 +1,34 @@
+page SessionCardcomponent {
+  seo {
+    title = "SessionCard component"
+    description = "Reusable session card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SessionCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>SessionCard</h1><p>Reusable session card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SessionCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SessionCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SessionCard.wrn</code></p><pre data-language="wrn"><code>component SessionCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/session-expired-dialog.wrn b/app/pages/components/session-expired-dialog.wrn
new file mode 100644
index 00000000..2e63c1a6
--- /dev/null
+++ b/app/pages/components/session-expired-dialog.wrn
@@ -0,0 +1,31 @@
+page SessionExpiredDialogcomponent {
+  seo {
+    title = "SessionExpiredDialog component"
+    description = "Reusable session expired dialog component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SessionExpiredDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>SessionExpiredDialog</h1><p>Reusable session expired dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SessionExpiredDialog title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SessionExpiredDialog&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SessionExpiredDialog.wrn</code></p><pre data-language="wrn"><code>component SessionExpiredDialog &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/setup-checklist.wrn b/app/pages/components/setup-checklist.wrn
new file mode 100644
index 00000000..91e9c528
--- /dev/null
+++ b/app/pages/components/setup-checklist.wrn
@@ -0,0 +1,34 @@
+page SetupChecklistcomponent {
+  seo {
+    title = "SetupChecklist component"
+    description = "Reusable setup checklist component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SetupChecklist</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>SetupChecklist</h1><p>Reusable setup checklist component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SetupChecklist eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SetupChecklist&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SetupChecklist.wrn</code></p><pre data-language="wrn"><code>component SetupChecklist &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/severity-selector.wrn b/app/pages/components/severity-selector.wrn
new file mode 100644
index 00000000..fd66f023
--- /dev/null
+++ b/app/pages/components/severity-selector.wrn
@@ -0,0 +1,37 @@
+page SeveritySelectorcomponent {
+  seo {
+    title = "SeveritySelector component"
+    description = "Reusable severity selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SeveritySelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>SeveritySelector</h1><p>Reusable severity selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SeveritySelector label=&quot;Severity&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SeveritySelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Severity&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SeveritySelector.wrn</code></p><pre data-language="wrn"><code>component SeveritySelector &#123;
+  props &#123;
+    label = &quot;Severity&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/shadow-picker.wrn b/app/pages/components/shadow-picker.wrn
new file mode 100644
index 00000000..70731d7f
--- /dev/null
+++ b/app/pages/components/shadow-picker.wrn
@@ -0,0 +1,37 @@
+page ShadowPickercomponent {
+  seo {
+    title = "ShadowPicker component"
+    description = "Reusable shadow picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ShadowPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ShadowPicker</h1><p>Reusable shadow picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ShadowPicker label=&quot;Shadow&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ShadowPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Shadow&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ShadowPicker.wrn</code></p><pre data-language="wrn"><code>component ShadowPicker &#123;
+  props &#123;
+    label = &quot;Shadow&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/share-action.wrn b/app/pages/components/share-action.wrn
new file mode 100644
index 00000000..987cd0d7
--- /dev/null
+++ b/app/pages/components/share-action.wrn
@@ -0,0 +1,32 @@
+page ShareActioncomponent {
+  seo {
+    title = "ShareAction component"
+    description = "Reusable share action component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ShareAction</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>ShareAction</h1><p>Reusable share action component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ShareAction label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ShareAction&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ShareAction.wrn</code></p><pre data-language="wrn"><code>component ShareAction &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/share-button.wrn b/app/pages/components/share-button.wrn
new file mode 100644
index 00000000..52b755ee
--- /dev/null
+++ b/app/pages/components/share-button.wrn
@@ -0,0 +1,30 @@
+page ShareButtoncomponent {
+  seo {
+    title = "ShareButton component"
+    description = "Reusable share button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ShareButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>ShareButton</h1><p>Reusable share button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ShareButton label=&quot;Action&quot; type=&quot;button&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ShareButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ShareButton.wrn</code></p><pre data-language="wrn"><code>component ShareButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    type = &quot;button&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;button type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--default &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/side-panel.wrn b/app/pages/components/side-panel.wrn
new file mode 100644
index 00000000..c117ea85
--- /dev/null
+++ b/app/pages/components/side-panel.wrn
@@ -0,0 +1,31 @@
+page SidePanelcomponent {
+  seo {
+    title = "SidePanel component"
+    description = "Reusable side panel component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SidePanel</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>SidePanel</h1><p>Reusable side panel component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SidePanel eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SidePanel&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SidePanel.wrn</code></p><pre data-language="wrn"><code>component SidePanel &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/sidebar-layout.wrn b/app/pages/components/sidebar-layout.wrn
new file mode 100644
index 00000000..8c0ae0d3
--- /dev/null
+++ b/app/pages/components/sidebar-layout.wrn
@@ -0,0 +1,27 @@
+page SidebarLayoutcomponent {
+  seo {
+    title = "SidebarLayout component"
+    description = "Reusable sidebar layout component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SidebarLayout</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>SidebarLayout</h1><p>Reusable sidebar layout component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SidebarLayout /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SidebarLayout&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SidebarLayout.wrn</code></p><pre data-language="wrn"><code>component SidebarLayout &#123;
+  props &#123;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-sidebar-layout &#123;class&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/sign-in-form.wrn b/app/pages/components/sign-in-form.wrn
new file mode 100644
index 00000000..b4c301ea
--- /dev/null
+++ b/app/pages/components/sign-in-form.wrn
@@ -0,0 +1,34 @@
+page SignInFormcomponent {
+  seo {
+    title = "SignInForm component"
+    description = "Reusable sign in form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SignInForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>SignInForm</h1><p>Reusable sign in form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SignInForm eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SignInForm&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SignInForm.wrn</code></p><pre data-language="wrn"><code>component SignInForm &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/sign-in-link.wrn b/app/pages/components/sign-in-link.wrn
new file mode 100644
index 00000000..178f012b
--- /dev/null
+++ b/app/pages/components/sign-in-link.wrn
@@ -0,0 +1,32 @@
+page SignInLinkcomponent {
+  seo {
+    title = "SignInLink component"
+    description = "Reusable sign in link component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SignInLink</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>SignInLink</h1><p>Reusable sign in link component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SignInLink label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SignInLink&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SignInLink.wrn</code></p><pre data-language="wrn"><code>component SignInLink &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/sign-up-form.wrn b/app/pages/components/sign-up-form.wrn
new file mode 100644
index 00000000..e08ec0fc
--- /dev/null
+++ b/app/pages/components/sign-up-form.wrn
@@ -0,0 +1,34 @@
+page SignUpFormcomponent {
+  seo {
+    title = "SignUpForm component"
+    description = "Reusable sign up form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SignUpForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>SignUpForm</h1><p>Reusable sign up form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SignUpForm eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SignUpForm&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SignUpForm.wrn</code></p><pre data-language="wrn"><code>component SignUpForm &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/site-search.wrn b/app/pages/components/site-search.wrn
new file mode 100644
index 00000000..e404098b
--- /dev/null
+++ b/app/pages/components/site-search.wrn
@@ -0,0 +1,34 @@
+page SiteSearchcomponent {
+  seo {
+    title = "SiteSearch component"
+    description = "Reusable site search component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SiteSearch</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>SiteSearch</h1><p>Reusable site search component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SiteSearch eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SiteSearch&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SiteSearch.wrn</code></p><pre data-language="wrn"><code>component SiteSearch &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/skeleton.wrn b/app/pages/components/skeleton.wrn
new file mode 100644
index 00000000..9e8993c9
--- /dev/null
+++ b/app/pages/components/skeleton.wrn
@@ -0,0 +1,31 @@
+page Skeletoncomponent {
+  seo {
+    title = "Skeleton component"
+    description = "Reusable skeleton component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Skeleton</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>Skeleton</h1><p>Reusable skeleton component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Skeleton height=&quot;4&quot; rounded=&quot;lg&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Skeleton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>height</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;4&quot;</code></td></tr><tr><td><code>rounded</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;lg&quot;</code></td></tr><tr><td><code>className</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Skeleton.wrn</code></p><pre data-language="wrn"><code>component Skeleton &#123;
+  props &#123;
+    height = &quot;4&quot;
+    rounded = &quot;lg&quot;
+    className = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div aria-hidden=&quot;true&quot; class=&quot;animate-pulse bg-slate-200 dark:bg-slate-800 h-&#123;height&#125; rounded-&#123;rounded&#125; &#123;className&#125;&quot;&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/skip-link.wrn b/app/pages/components/skip-link.wrn
new file mode 100644
index 00000000..39a7c79d
--- /dev/null
+++ b/app/pages/components/skip-link.wrn
@@ -0,0 +1,32 @@
+page SkipLinkcomponent {
+  seo {
+    title = "SkipLink component"
+    description = "Reusable skip link component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SkipLink</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>SkipLink</h1><p>Reusable skip link component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SkipLink label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SkipLink&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SkipLink.wrn</code></p><pre data-language="wrn"><code>component SkipLink &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/sla-table.wrn b/app/pages/components/sla-table.wrn
new file mode 100644
index 00000000..a8f8a868
--- /dev/null
+++ b/app/pages/components/sla-table.wrn
@@ -0,0 +1,31 @@
+page SlaTablecomponent {
+  seo {
+    title = "SlaTable component"
+    description = "Reusable sla table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SlaTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>SlaTable</h1><p>Reusable sla table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SlaTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SlaTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SlaTable.wrn</code></p><pre data-language="wrn"><code>component SlaTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/slider.wrn b/app/pages/components/slider.wrn
new file mode 100644
index 00000000..3c859b2b
--- /dev/null
+++ b/app/pages/components/slider.wrn
@@ -0,0 +1,34 @@
+page Slidercomponent {
+  seo {
+    title = "Slider component"
+    description = "Reusable slider component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Slider</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>Slider</h1><p>Reusable slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Slider eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Slider&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Slider.wrn</code></p><pre data-language="wrn"><code>component Slider &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/slug-input.wrn b/app/pages/components/slug-input.wrn
new file mode 100644
index 00000000..9b77872d
--- /dev/null
+++ b/app/pages/components/slug-input.wrn
@@ -0,0 +1,37 @@
+page SlugInputcomponent {
+  seo {
+    title = "SlugInput component"
+    description = "Reusable slug input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SlugInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>SlugInput</h1><p>Reusable slug input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SlugInput label=&quot;Slug&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SlugInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Slug&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SlugInput.wrn</code></p><pre data-language="wrn"><code>component SlugInput &#123;
+  props &#123;
+    label = &quot;Slug&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/small-text.wrn b/app/pages/components/small-text.wrn
new file mode 100644
index 00000000..cb3368ba
--- /dev/null
+++ b/app/pages/components/small-text.wrn
@@ -0,0 +1,29 @@
+page SmallTextcomponent {
+  seo {
+    title = "SmallText component"
+    description = "Reusable small text component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SmallText</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>SmallText</h1><p>Reusable small text component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SmallText text=&quot;text&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SmallText&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>text</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SmallText.wrn</code></p><pre data-language="wrn"><code>component SmallText &#123;
+  props &#123;
+    text = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-type wire-type--small wire-text--&#123;align&#125;  &#123;class&#125;&quot;&gt;&#123;text&#125;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/smart-route-diagram.wrn b/app/pages/components/smart-route-diagram.wrn
new file mode 100644
index 00000000..9b3b2aa8
--- /dev/null
+++ b/app/pages/components/smart-route-diagram.wrn
@@ -0,0 +1,32 @@
+page SmartRouteDiagramcomponent {
+  seo {
+    title = "SmartRouteDiagram component"
+    description = "Reusable smart route diagram component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SmartRouteDiagram</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>SmartRouteDiagram</h1><p>Reusable smart route diagram component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SmartRouteDiagram title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SmartRouteDiagram&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SmartRouteDiagram.wrn</code></p><pre data-language="wrn"><code>component SmartRouteDiagram &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/sms-composer.wrn b/app/pages/components/sms-composer.wrn
new file mode 100644
index 00000000..88cb4123
--- /dev/null
+++ b/app/pages/components/sms-composer.wrn
@@ -0,0 +1,34 @@
+page SmsComposercomponent {
+  seo {
+    title = "SmsComposer component"
+    description = "Reusable sms composer component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SmsComposer</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>SmsComposer</h1><p>Reusable sms composer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SmsComposer eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SmsComposer&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SmsComposer.wrn</code></p><pre data-language="wrn"><code>component SmsComposer &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/sms-message-editor.wrn b/app/pages/components/sms-message-editor.wrn
new file mode 100644
index 00000000..0ca84122
--- /dev/null
+++ b/app/pages/components/sms-message-editor.wrn
@@ -0,0 +1,37 @@
+page SmsMessageEditorcomponent {
+  seo {
+    title = "SmsMessageEditor component"
+    description = "Reusable sms message editor component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SmsMessageEditor</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>SmsMessageEditor</h1><p>Reusable sms message editor component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SmsMessageEditor label=&quot;SmsMessage&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SmsMessageEditor&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;SmsMessage&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SmsMessageEditor.wrn</code></p><pre data-language="wrn"><code>component SmsMessageEditor &#123;
+  props &#123;
+    label = &quot;SmsMessage&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/sms-segment-counter.wrn b/app/pages/components/sms-segment-counter.wrn
new file mode 100644
index 00000000..cd53770c
--- /dev/null
+++ b/app/pages/components/sms-segment-counter.wrn
@@ -0,0 +1,32 @@
+page SmsSegmentCountercomponent {
+  seo {
+    title = "SmsSegmentCounter component"
+    description = "Reusable sms segment counter component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SmsSegmentCounter</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>SmsSegmentCounter</h1><p>Reusable sms segment counter component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SmsSegmentCounter label=&quot;SmsSegment&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SmsSegmentCounter&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;SmsSegment&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SmsSegmentCounter.wrn</code></p><pre data-language="wrn"><code>component SmsSegmentCounter &#123;
+  props &#123;
+    label = &quot;SmsSegment&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/social-share.wrn b/app/pages/components/social-share.wrn
new file mode 100644
index 00000000..6cc3ad14
--- /dev/null
+++ b/app/pages/components/social-share.wrn
@@ -0,0 +1,164 @@
+page SocialSharecomponent {
+  seo {
+    title = "SocialShare component"
+    description = "Reusable social share component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SocialShare</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>SocialShare</h1><p>Reusable social share component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>10 props</span><span>0 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SocialShare title=&quot;Share this page&quot; description=&quot;description&quot; url=&quot;url&quot; shareText=&quot;shareText&quot; centered=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SocialShare&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Share this page&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>url</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>shareText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>centered</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>compact</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>showTitle</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>showCopy</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>networks</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SocialShare.wrn</code></p><pre data-language="wrn"><code>component SocialShare &#123;
+    props &#123;
+        class: string = &quot;&quot;
+        title = &quot;Share this page&quot;
+        description = &quot;&quot;
+
+        url = &quot;&quot;
+        shareText = &quot;&quot;
+
+        centered = false
+        compact = false
+        showTitle = true
+        showCopy = true
+
+        networks = []
+    &#125;
+
+    state copied = false
+
+    view &#123;
+        &lt;aside
+            aria-labelledby=&quot;social-share-title&quot;
+            class=&quot;w-full &#123;class&#125;&quot;
+        &gt;
+            &lt;div
+                class=&quot; relative overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/[0.03] &quot;
+            &gt;
+                &lt;!-- Subtle background --&gt;
+                &lt;div
+                    aria-hidden=&quot;true&quot;
+                    class=&quot;pointer-events-none absolute inset-0 overflow-hidden&quot;
+                &gt;
+                    &lt;div class=&quot;absolute -right-16 -top-20 h-40 w-40 rounded-full bg-indigo-200/25 blur-3xl dark:bg-indigo-500/10&quot; &gt;&lt;/div&gt;
+
+                    &lt;div class=&quot;absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-indigo-300/60 to-transparent dark:via-indigo-500/20&quot; &gt;&lt;/div&gt;
+                &lt;/div&gt;
+
+                &lt;div
+                    class=&quot;relative&quot;
+                    class:p-4=&quot;compact&quot;
+                    class:sm:p-5=&quot;compact&quot;
+                    class:p-5=&quot;!compact&quot;
+                    class:sm:p-6=&quot;!compact&quot;
+                &gt;
+                    &lt;div
+                        class=&quot;gap-4&quot;
+                        class:flex=&quot;centered&quot;
+                        class:flex-col=&quot;centered&quot;
+                        class:items-center=&quot;centered&quot;
+                        class:text-center=&quot;centered&quot;
+                        class:flex=&quot;!centered&quot;
+                        class:flex-col=&quot;!centered&quot;
+                        class:sm:flex-row=&quot;!centered&quot;
+                        class:sm:items-center=&quot;!centered&quot;
+                        class:sm:justify-between=&quot;!centered&quot;
+                    &gt;
+                        &lt;!-- Heading --&gt;
+                        &lt;div
+                            class=&quot;min-w-0&quot;
+                            class:hidden=&quot;!showTitle&quot;
+                        &gt;
+                            &lt;h2
+                                id=&quot;social-share-title&quot;
+                                class=&quot;font-bold tracking-tight text-slate-950 dark:text-white&quot;
+                                class:text-sm=&quot;compact&quot;
+                                class:text-base=&quot;!compact&quot;
+                            &gt;
+                                &#123;title&#125;
+                            &lt;/h2&gt;
+
+                            &lt;p
+                                class=&quot;mt-1 text-sm leading-6 text-slate-500 dark:text-slate-400&quot;
+                                class:hidden=&quot;description === '' || compact&quot;
+                            &gt;
+                                &#123;description&#125;
+                            &lt;/p&gt;
+                        &lt;/div&gt;
+
+                        &lt;!-- Share buttons --&gt;
+                        &lt;div
+                            class=&quot;flex flex-wrap items-center gap-2&quot;
+                            class:justify-center=&quot;centered&quot;
+                            class:justify-start=&quot;!centered&quot;
+                        &gt;
+                            &#123;#each networks.slice(0, 5) as network&#125;
+                            &lt;a
+                                href=&quot;&#123;network.href&#125;&quot;
+                                target=&quot;_blank&quot;
+                                rel=&quot;noopener noreferrer&quot;
+                                aria-label=&quot;Share on &#123;network.label&#125;&quot;
+                                title=&quot;Share on &#123;network.label&#125;&quot;
+                                class=&quot; group inline-flex items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white text-sm font-semibold text-slate-600 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-indigo-50 hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-300 &quot;
+                                class:h-9=&quot;compact&quot;
+                                class:w-9=&quot;compact&quot;
+                                class:h-10=&quot;!compact&quot;
+                                class:px-3=&quot;!compact&quot;
+                            &gt;
+                                &lt;span class=&quot;&#123;network.iconClass&#125; h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                &lt;span class:hidden=&quot;compact&quot;&gt;
+                                    &#123;network.label&#125;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+                            &#123;/each&#125;
+
+                            &lt;!-- Copy link --&gt;
+                            &lt;button
+                                type=&quot;button&quot;
+                                @click=&quot; navigator.clipboard.writeText(url); copied = true; &quot;
+                                aria-label=&quot;&#123;copied ? 'Link copied' : 'Copy page link'&#125;&quot;
+                                class=&quot; group inline-flex items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white text-sm font-semibold text-slate-600 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-indigo-50 hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-300 &quot;
+                                class:hidden=&quot;!showCopy&quot;
+                                class:h-9=&quot;compact&quot;
+                                class:w-9=&quot;compact&quot;
+                                class:h-10=&quot;!compact&quot;
+                                class:px-3=&quot;!compact&quot;
+                            &gt;
+                                &lt;span class=&quot;icon-[lucide--copy] h-4 w-4&quot; class:hidden=&quot;copied&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                &lt;span class=&quot;icon-[lucide--check] h-4 w-4&quot; class:hidden=&quot;!copied&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                &lt;span class:hidden=&quot;compact&quot;&gt;
+                                    &#123;copied ? 'Copied' : 'Copy link'&#125;
+                                &lt;/span&gt;
+                            &lt;/button&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+
+                    &lt;!-- Copy feedback --&gt;
+                    &lt;div
+                        role=&quot;status&quot;
+                        aria-live=&quot;polite&quot;
+                        class=&quot;mt-3 rounded-xl bg-emerald-50 px-3 py-2 text-sm font-medium text-emerald-700 ring-1 ring-inset ring-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-300 dark:ring-emerald-500/20&quot;
+                        class:hidden=&quot;!copied&quot;
+                        class:text-center=&quot;centered&quot;
+                    &gt;
+                        Page link copied to your clipboard.
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/aside&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/solution-hero.wrn b/app/pages/components/solution-hero.wrn
new file mode 100644
index 00000000..df5adfc2
--- /dev/null
+++ b/app/pages/components/solution-hero.wrn
@@ -0,0 +1,31 @@
+page SolutionHerocomponent {
+  seo {
+    title = "SolutionHero component"
+    description = "Reusable solution hero component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SolutionHero</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>SolutionHero</h1><p>Reusable solution hero component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SolutionHero eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SolutionHero&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SolutionHero.wrn</code></p><pre data-language="wrn"><code>component SolutionHero &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/solution-page-shell.wrn b/app/pages/components/solution-page-shell.wrn
new file mode 100644
index 00000000..e0252da0
--- /dev/null
+++ b/app/pages/components/solution-page-shell.wrn
@@ -0,0 +1,31 @@
+page SolutionPageShellcomponent {
+  seo {
+    title = "SolutionPageShell component"
+    description = "Reusable solution page shell component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SolutionPageShell</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>SolutionPageShell</h1><p>Reusable solution page shell component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SolutionPageShell eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SolutionPageShell&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SolutionPageShell.wrn</code></p><pre data-language="wrn"><code>component SolutionPageShell &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/solution-section.wrn b/app/pages/components/solution-section.wrn
new file mode 100644
index 00000000..c4a08fef
--- /dev/null
+++ b/app/pages/components/solution-section.wrn
@@ -0,0 +1,31 @@
+page SolutionSectioncomponent {
+  seo {
+    title = "SolutionSection component"
+    description = "Reusable solution section component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SolutionSection</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>SolutionSection</h1><p>Reusable solution section component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SolutionSection eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SolutionSection&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SolutionSection.wrn</code></p><pre data-language="wrn"><code>component SolutionSection &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/solutions-mega-menu.wrn b/app/pages/components/solutions-mega-menu.wrn
new file mode 100644
index 00000000..b4e27da6
--- /dev/null
+++ b/app/pages/components/solutions-mega-menu.wrn
@@ -0,0 +1,389 @@
+page SolutionsMegaMenucomponent {
+  seo {
+    title = "SolutionsMegaMenu component"
+    description = "Reusable solutions mega menu component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SolutionsMegaMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>SolutionsMegaMenu</h1><p>Reusable solutions mega menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SolutionsMegaMenu /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SolutionsMegaMenu&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SolutionsMegaMenu.wrn</code></p><pre data-language="wrn"><code>component SolutionsMegaMenu &#123;
+    props &#123;
+        class: string = &quot;&quot;
+    &#125;
+    view &#123;
+        &lt;div
+            class=&quot;border-t border-slate-200 bg-white shadow-2xl shadow-slate-950/10 dark:border-white/10 dark:bg-slate-950 dark:shadow-black/30 &#123;class&#125;&quot;
+        &gt;
+            &lt;div class=&quot;mx-auto max-w-7xl px-6 py-8 lg:px-10&quot;&gt;
+                &lt;div class=&quot;grid gap-8 lg:grid-cols-[minmax(0,1.6fr)_minmax(18rem,0.75fr)]&quot;&gt;
+
+                    &lt;!-- Solution links --&gt;
+                    &lt;section&gt;
+                        &lt;div class=&quot;mb-5 flex items-end justify-between gap-6&quot;&gt;
+                            &lt;div&gt;
+                                &lt;p class=&quot;text-xs font-semibold uppercase tracking-[0.16em] text-indigo-600 dark:text-indigo-400&quot;&gt;
+                                    Solutions
+                                &lt;/p&gt;
+
+                                &lt;h2 class=&quot;mt-2 text-lg font-bold tracking-tight text-slate-950 dark:text-white&quot;&gt;
+                                    Identity infrastructure for every stage of growth
+                                &lt;/h2&gt;
+
+                                &lt;p class=&quot;mt-1 text-sm text-slate-500 dark:text-slate-400&quot;&gt;
+                                    Choose a solution designed around your product, team, and customers.
+                                &lt;/p&gt;
+                            &lt;/div&gt;
+
+                            &lt;a
+                                href=&quot;/solutions&quot;
+                                class=&quot;group hidden items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 xl:inline-flex&quot;
+                            &gt;
+                                View all solutions
+
+                                &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/a&gt;
+                        &lt;/div&gt;
+
+                        &lt;div class=&quot;grid gap-2 md:grid-cols-2&quot;&gt;
+
+                            &lt;!-- Startups --&gt;
+                            &lt;a
+                                href=&quot;/solutions/startups&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-indigo-200 hover:bg-indigo-50 dark:hover:border-indigo-500/20 dark:hover:bg-indigo-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-indigo-100 text-indigo-700 transition group-hover:bg-indigo-600 group-hover:text-white dark:bg-indigo-500/15 dark:text-indigo-300 dark:group-hover:bg-indigo-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--rocket] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            Startups
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-indigo-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-indigo-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Launch secure authentication quickly without slowing product development.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;!-- SaaS --&gt;
+                            &lt;a
+                                href=&quot;/solutions/saas&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-cyan-200 hover:bg-cyan-50 dark:hover:border-cyan-500/20 dark:hover:bg-cyan-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-cyan-100 text-cyan-700 transition group-hover:bg-cyan-600 group-hover:text-white dark:bg-cyan-500/15 dark:text-cyan-300 dark:group-hover:bg-cyan-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--cloud] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            SaaS platforms
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-cyan-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-cyan-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Add users, organizations, roles, SSO, and secure account recovery.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;!-- Enterprise --&gt;
+                            &lt;a
+                                href=&quot;/solutions/enterprise&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-violet-200 hover:bg-violet-50 dark:hover:border-violet-500/20 dark:hover:bg-violet-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-violet-100 text-violet-700 transition group-hover:bg-violet-600 group-hover:text-white dark:bg-violet-500/15 dark:text-violet-300 dark:group-hover:bg-violet-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--building-2] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            Enterprise
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-violet-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-violet-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Support complex organizations, governance, auditability, and scale.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;!-- Developers --&gt;
+                            &lt;a
+                                href=&quot;/solutions/developers&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-emerald-200 hover:bg-emerald-50 dark:hover:border-emerald-500/20 dark:hover:bg-emerald-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-emerald-100 text-emerald-700 transition group-hover:bg-emerald-600 group-hover:text-white dark:bg-emerald-500/15 dark:text-emerald-300 dark:group-hover:bg-emerald-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--code-2] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            Developers
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-emerald-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-emerald-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        APIs, SDKs, webhooks, templates, and developer-friendly workflows.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;!-- Agencies --&gt;
+                            &lt;a
+                                href=&quot;/solutions/agencies&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-amber-200 hover:bg-amber-50 dark:hover:border-amber-500/20 dark:hover:bg-amber-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-amber-100 text-amber-700 transition group-hover:bg-amber-600 group-hover:text-white dark:bg-amber-500/15 dark:text-amber-300 dark:group-hover:bg-amber-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--briefcase-business] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            Agencies
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-amber-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-amber-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Manage identities across customer projects and branded experiences.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+
+                            &lt;!-- B2B --&gt;
+                            &lt;a
+                                href=&quot;/solutions/b2b&quot;
+                                class=&quot;group flex items-start gap-4 rounded-2xl border border-transparent p-4 transition hover:border-rose-200 hover:bg-rose-50 dark:hover:border-rose-500/20 dark:hover:bg-rose-500/10&quot;
+                            &gt;
+                                &lt;span
+                                    class=&quot;grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-rose-100 text-rose-700 transition group-hover:bg-rose-600 group-hover:text-white dark:bg-rose-500/15 dark:text-rose-300 dark:group-hover:bg-rose-500 dark:group-hover:text-white&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--handshake] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/span&gt;
+
+                                &lt;span class=&quot;min-w-0&quot;&gt;
+                                    &lt;span class=&quot;flex items-center gap-2&quot;&gt;
+                                        &lt;span class=&quot;text-sm font-semibold text-slate-950 dark:text-white&quot;&gt;
+                                            B2B products
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5 text-slate-300 opacity-0 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-rose-600 group-hover:opacity-100 dark:text-slate-600 dark:group-hover:text-rose-300&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span class=&quot;mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400&quot;&gt;
+                                        Secure customer organizations, team access, and enterprise connections.
+                                    &lt;/span&gt;
+                                &lt;/span&gt;
+                            &lt;/a&gt;
+                        &lt;/div&gt;
+
+                        &lt;a
+                            href=&quot;/solutions&quot;
+                            class=&quot;mt-4 flex items-center justify-center gap-2 rounded-xl border border-indigo-200 bg-indigo-50 px-4 py-3 text-sm font-semibold text-indigo-700 transition hover:border-indigo-300 hover:bg-indigo-100 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/15 xl:hidden&quot;
+                        &gt;
+                            View all solutions
+
+                            &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                        &lt;/a&gt;
+                    &lt;/section&gt;
+
+                    &lt;!-- Featured solution --&gt;
+                    &lt;aside
+                        class=&quot;relative overflow-hidden rounded-3xl border border-violet-200 bg-linear-to-br from-violet-50 via-white to-indigo-50 p-6 dark:border-violet-500/20 dark:from-violet-500/10 dark:via-slate-900 dark:to-indigo-500/10&quot;
+                    &gt;
+                        &lt;div aria-hidden=&quot;true&quot; class=&quot;absolute -right-16 -top-16 h-40 w-40 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10&quot; &gt;&lt;/div&gt;
+
+                        &lt;div aria-hidden=&quot;true&quot; class=&quot;absolute -bottom-20 -left-16 h-40 w-40 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10&quot; &gt;&lt;/div&gt;
+
+                        &lt;div class=&quot;relative&quot;&gt;
+                            &lt;span
+                                class=&quot;inline-flex items-center gap-2 rounded-full border border-violet-200 bg-white/80 px-3 py-1.5 text-xs font-semibold text-violet-700 backdrop-blur-sm dark:border-violet-500/20 dark:bg-white/5 dark:text-violet-300&quot;
+                            &gt;
+                                &lt;span class=&quot;icon-[lucide--wand-sparkles] h-3.5 w-3.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                Recommended for SaaS
+                            &lt;/span&gt;
+
+                            &lt;div
+                                class=&quot;mt-5 grid h-12 w-12 place-items-center rounded-2xl bg-violet-600 text-white shadow-lg shadow-violet-600/20&quot;
+                            &gt;
+                                &lt;span class=&quot;icon-[lucide--cloud-cog] h-6 w-6&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/div&gt;
+
+                            &lt;h3 class=&quot;mt-5 text-xl font-bold tracking-tight text-slate-950 dark:text-white&quot;&gt;
+                                Launch enterprise-ready identity
+                            &lt;/h3&gt;
+
+                            &lt;p class=&quot;mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400&quot;&gt;
+                                Start with simple authentication and add organizations,
+                                permissions, enterprise SSO, and governance as your product grows.
+                            &lt;/p&gt;
+
+                            &lt;div class=&quot;mt-5 grid gap-3&quot;&gt;
+                                &lt;div
+                                    class=&quot;flex items-center gap-3 rounded-xl border border-violet-200 bg-white/70 px-3 py-3 dark:border-violet-500/20 dark:bg-white/5&quot;
+                                &gt;
+                                    &lt;span
+                                        class=&quot;grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300&quot;
+                                    &gt;
+                                        &lt;span class=&quot;icon-[lucide--timer-reset] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span&gt;
+                                        &lt;span class=&quot;block text-sm font-semibold text-slate-900 dark:text-white&quot;&gt;
+                                            Faster launch
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;block text-xs text-slate-500 dark:text-slate-400&quot;&gt;
+                                            Start with secure defaults
+                                        &lt;/span&gt;
+                                    &lt;/span&gt;
+                                &lt;/div&gt;
+
+                                &lt;div
+                                    class=&quot;flex items-center gap-3 rounded-xl border border-violet-200 bg-white/70 px-3 py-3 dark:border-violet-500/20 dark:bg-white/5&quot;
+                                &gt;
+                                    &lt;span
+                                        class=&quot;grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300&quot;
+                                    &gt;
+                                        &lt;span class=&quot;icon-[lucide--expand] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span&gt;
+                                        &lt;span class=&quot;block text-sm font-semibold text-slate-900 dark:text-white&quot;&gt;
+                                            Built to scale
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;block text-xs text-slate-500 dark:text-slate-400&quot;&gt;
+                                            Add advanced controls later
+                                        &lt;/span&gt;
+                                    &lt;/span&gt;
+                                &lt;/div&gt;
+
+                                &lt;div
+                                    class=&quot;flex items-center gap-3 rounded-xl border border-violet-200 bg-white/70 px-3 py-3 dark:border-violet-500/20 dark:bg-white/5&quot;
+                                &gt;
+                                    &lt;span
+                                        class=&quot;grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300&quot;
+                                    &gt;
+                                        &lt;span class=&quot;icon-[lucide--shield-check] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                    &lt;/span&gt;
+
+                                    &lt;span&gt;
+                                        &lt;span class=&quot;block text-sm font-semibold text-slate-900 dark:text-white&quot;&gt;
+                                            Secure by design
+                                        &lt;/span&gt;
+
+                                        &lt;span class=&quot;block text-xs text-slate-500 dark:text-slate-400&quot;&gt;
+                                            Protect every account flow
+                                        &lt;/span&gt;
+                                    &lt;/span&gt;
+                                &lt;/div&gt;
+                            &lt;/div&gt;
+
+                            &lt;a
+                                href=&quot;/solutions/saas&quot;
+                                class=&quot;group mt-6 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-violet-600 px-4 text-sm font-bold text-white shadow-lg shadow-violet-600/20 transition hover:-translate-y-0.5 hover:bg-violet-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900&quot;
+                            &gt;
+                                Explore the SaaS solution
+
+                                &lt;span class=&quot;icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                            &lt;/a&gt;
+                        &lt;/div&gt;
+                    &lt;/aside&gt;
+                &lt;/div&gt;
+
+                &lt;!-- Bottom use-case links --&gt;
+                &lt;div
+                    class=&quot;mt-7 flex flex-wrap items-center justify-between gap-4 border-t border-slate-200 pt-5 dark:border-white/10&quot;
+                &gt;
+                    &lt;div class=&quot;flex flex-wrap items-center gap-x-6 gap-y-3&quot;&gt;
+                        &lt;a
+                            href=&quot;/solutions/customer-identity&quot;
+                            class=&quot;inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300&quot;
+                        &gt;
+                            &lt;span class=&quot;icon-[lucide--contact-round] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                            Customer identity
+                        &lt;/a&gt;
+
+                        &lt;a
+                            href=&quot;/solutions/workforce-identity&quot;
+                            class=&quot;inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300&quot;
+                        &gt;
+                            &lt;span class=&quot;icon-[lucide--id-card] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                            Workforce identity
+                        &lt;/a&gt;
+
+                        &lt;a
+                            href=&quot;/solutions/marketplaces&quot;
+                            class=&quot;inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300&quot;
+                        &gt;
+                            &lt;span class=&quot;icon-[lucide--store] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                            Marketplaces
+                        &lt;/a&gt;
+
+                        &lt;a
+                            href=&quot;/solutions/multi-tenant&quot;
+                            class=&quot;inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300&quot;
+                        &gt;
+                            &lt;span class=&quot;icon-[lucide--network] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                            Multi-tenant apps
+                        &lt;/a&gt;
+                    &lt;/div&gt;
+
+                    &lt;a
+                        href=&quot;/customers&quot;
+                        class=&quot;group inline-flex items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300&quot;
+                    &gt;
+                        See customer stories
+
+                        &lt;span class=&quot;icon-[lucide--arrow-up-right] h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/a&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/sortable-table.wrn b/app/pages/components/sortable-table.wrn
new file mode 100644
index 00000000..cc138fbb
--- /dev/null
+++ b/app/pages/components/sortable-table.wrn
@@ -0,0 +1,31 @@
+page SortableTablecomponent {
+  seo {
+    title = "SortableTable component"
+    description = "Reusable sortable table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SortableTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>SortableTable</h1><p>Reusable sortable table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SortableTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SortableTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SortableTable.wrn</code></p><pre data-language="wrn"><code>component SortableTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/spacer.wrn b/app/pages/components/spacer.wrn
new file mode 100644
index 00000000..6f08ebd3
--- /dev/null
+++ b/app/pages/components/spacer.wrn
@@ -0,0 +1,30 @@
+page spacercomponent {
+  seo {
+    title = "spacer component"
+    description = "Reusable spacer component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">spacer</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>spacer</h1><p>Reusable spacer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;spacer /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;spacer&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/spacer.wrn</code></p><pre data-language="wrn"><code>// Flexible spacer: grows to push siblings apart inside a flex row/column.
+component Spacer &#123;
+  props &#123;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;wire-spacer &#123;class&#125;&quot;&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/spinner.wrn b/app/pages/components/spinner.wrn
new file mode 100644
index 00000000..c3a599ec
--- /dev/null
+++ b/app/pages/components/spinner.wrn
@@ -0,0 +1,31 @@
+page Spinnercomponent {
+  seo {
+    title = "Spinner component"
+    description = "Reusable spinner component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Spinner</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Spinner</h1><p>Reusable spinner component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Spinner label=&quot;Loading&quot; size=&quot;md&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Spinner&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Loading&quot;</code></td></tr><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Spinner.wrn</code></p><pre data-language="wrn"><code>component Spinner &#123;
+  props &#123;
+    class = &quot;&quot;
+    label = &quot;Loading&quot;
+    size = &quot;md&quot;
+  &#125;
+  view &#123;
+    &lt;span role=&quot;status&quot; aria-label=&quot;&#123;label&#125;&quot; class=&quot;inline-block animate-spin rounded-full border-2 border-slate-300 border-r-violet-600 &#123;size === 'sm' ? 'size-4' : size === 'lg' ? 'size-10' : 'size-6'&#125; &#123;class&#125;&quot;&gt;&lt;/span&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/split-button.wrn b/app/pages/components/split-button.wrn
new file mode 100644
index 00000000..607b6075
--- /dev/null
+++ b/app/pages/components/split-button.wrn
@@ -0,0 +1,32 @@
+page SplitButtoncomponent {
+  seo {
+    title = "SplitButton component"
+    description = "Reusable split button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SplitButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>SplitButton</h1><p>Reusable split button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SplitButton label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SplitButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SplitButton.wrn</code></p><pre data-language="wrn"><code>component SplitButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/split-cta.wrn b/app/pages/components/split-cta.wrn
new file mode 100644
index 00000000..a7613bb0
--- /dev/null
+++ b/app/pages/components/split-cta.wrn
@@ -0,0 +1,32 @@
+page SplitCTAcomponent {
+  seo {
+    title = "SplitCTA component"
+    description = "Reusable split c t a component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SplitCTA</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>SplitCTA</h1><p>Reusable split c t a component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SplitCTA label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SplitCTA&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SplitCTA.wrn</code></p><pre data-language="wrn"><code>component SplitCTA &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/split-hero.wrn b/app/pages/components/split-hero.wrn
new file mode 100644
index 00000000..7bc48e43
--- /dev/null
+++ b/app/pages/components/split-hero.wrn
@@ -0,0 +1,31 @@
+page SplitHerocomponent {
+  seo {
+    title = "SplitHero component"
+    description = "Reusable split hero component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SplitHero</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>SplitHero</h1><p>Reusable split hero component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SplitHero eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SplitHero&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SplitHero.wrn</code></p><pre data-language="wrn"><code>component SplitHero &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/split-layout.wrn b/app/pages/components/split-layout.wrn
new file mode 100644
index 00000000..e9e56d88
--- /dev/null
+++ b/app/pages/components/split-layout.wrn
@@ -0,0 +1,27 @@
+page SplitLayoutcomponent {
+  seo {
+    title = "SplitLayout component"
+    description = "Reusable split layout component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SplitLayout</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>SplitLayout</h1><p>Reusable split layout component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SplitLayout /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SplitLayout&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SplitLayout.wrn</code></p><pre data-language="wrn"><code>component SplitLayout &#123;
+  props &#123;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-split-layout &#123;class&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/split-section-header.wrn b/app/pages/components/split-section-header.wrn
new file mode 100644
index 00000000..fdebae7c
--- /dev/null
+++ b/app/pages/components/split-section-header.wrn
@@ -0,0 +1,31 @@
+page SplitSectionHeadercomponent {
+  seo {
+    title = "SplitSectionHeader component"
+    description = "Reusable split section header component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SplitSectionHeader</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>SplitSectionHeader</h1><p>Reusable split section header component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SplitSectionHeader eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SplitSectionHeader&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SplitSectionHeader.wrn</code></p><pre data-language="wrn"><code>component SplitSectionHeader &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/stack.wrn b/app/pages/components/stack.wrn
new file mode 100644
index 00000000..2f0c3a0d
--- /dev/null
+++ b/app/pages/components/stack.wrn
@@ -0,0 +1,30 @@
+page Stackcomponent {
+  seo {
+    title = "Stack component"
+    description = "Reusable stack component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Stack</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Stack</h1><p>Reusable stack component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>2 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Stack gap=&quot;4&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Stack&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;4&quot;</code></td></tr><tr><td><code>className</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Stack.wrn</code></p><pre data-language="wrn"><code>component Stack &#123;
+  props &#123;
+    gap = &quot;4&quot;
+    className = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;flex flex-col gap-&#123;gap&#125; &#123;className&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/start-free-button.wrn b/app/pages/components/start-free-button.wrn
new file mode 100644
index 00000000..f7b03029
--- /dev/null
+++ b/app/pages/components/start-free-button.wrn
@@ -0,0 +1,32 @@
+page StartFreeButtoncomponent {
+  seo {
+    title = "StartFreeButton component"
+    description = "Reusable start free button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StartFreeButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>StartFreeButton</h1><p>Reusable start free button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;StartFreeButton label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;StartFreeButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/StartFreeButton.wrn</code></p><pre data-language="wrn"><code>component StartFreeButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/stat-card.wrn b/app/pages/components/stat-card.wrn
new file mode 100644
index 00000000..d564f1c5
--- /dev/null
+++ b/app/pages/components/stat-card.wrn
@@ -0,0 +1,33 @@
+page StatCardcomponent {
+  seo {
+    title = "StatCard component"
+    description = "Reusable stat card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StatCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>StatCard</h1><p>Reusable stat card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;StatCard label=&quot;Metric&quot; value=&quot;0&quot; change=&quot;change&quot; trend=&quot;neutral&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;StatCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Metric&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;0&quot;</code></td></tr><tr><td><code>change</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>trend</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;neutral&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/StatCard.wrn</code></p><pre data-language="wrn"><code>component StatCard &#123;
+  props &#123;
+    class = &quot;&quot;
+    label = &quot;Metric&quot;
+    value = &quot;0&quot;
+    change = &quot;&quot;
+    trend = &quot;neutral&quot;
+  &#125;
+  view &#123;
+    &lt;article class=&quot;rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900 &#123;class&#125;&quot;&gt;&lt;p class=&quot;text-sm font-medium text-slate-500&quot;&gt;&#123;label&#125;&lt;/p&gt;&lt;div class=&quot;mt-2 flex items-end justify-between gap-3&quot;&gt;&lt;p class=&quot;text-3xl font-bold tracking-tight&quot;&gt;&#123;value&#125;&lt;/p&gt;&lt;span data-show=&quot;change&quot; class=&quot;text-sm font-semibold &#123;trend === 'up' ? 'text-emerald-600' : trend === 'down' ? 'text-red-600' : 'text-slate-500'&#125;&quot;&gt;&#123;trend === 'up' ? '↑' : trend === 'down' ? '↓' : ''&#125; &#123;change&#125;&lt;/span&gt;&lt;/div&gt;&lt;/article&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/state-selector.wrn b/app/pages/components/state-selector.wrn
new file mode 100644
index 00000000..6d9705f1
--- /dev/null
+++ b/app/pages/components/state-selector.wrn
@@ -0,0 +1,37 @@
+page StateSelectorcomponent {
+  seo {
+    title = "StateSelector component"
+    description = "Reusable state selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StateSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>StateSelector</h1><p>Reusable state selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;StateSelector label=&quot;State&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;StateSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;State&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/StateSelector.wrn</code></p><pre data-language="wrn"><code>component StateSelector &#123;
+  props &#123;
+    label = &quot;State&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/status-badge.wrn b/app/pages/components/status-badge.wrn
new file mode 100644
index 00000000..62de3ec0
--- /dev/null
+++ b/app/pages/components/status-badge.wrn
@@ -0,0 +1,30 @@
+page StatusBadgecomponent {
+  seo {
+    title = "StatusBadge component"
+    description = "Reusable status badge component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StatusBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>StatusBadge</h1><p>Reusable status badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>2 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;StatusBadge status=&quot;operational&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;StatusBadge&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>status</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;operational&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/StatusBadge.wrn</code></p><pre data-language="wrn"><code>component StatusBadge &#123;
+  props &#123;
+    class = &quot;&quot;
+    status = &quot;operational&quot;
+  &#125;
+  view &#123;
+    &lt;span class=&quot;inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold &#123;status === 'operational' ? 'bg-emerald-100 text-emerald-700' : status === 'degraded' ? 'bg-amber-100 text-amber-700' : status === 'outage' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'&#125; &#123;class&#125;&quot;&gt;&lt;span class=&quot;size-2 rounded-full bg-current&quot;&gt;&lt;/span&gt;&#123;status&#125;&lt;/span&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/status-banner.wrn b/app/pages/components/status-banner.wrn
new file mode 100644
index 00000000..3451b0c9
--- /dev/null
+++ b/app/pages/components/status-banner.wrn
@@ -0,0 +1,143 @@
+page StatusBannercomponent {
+  seo {
+    title = "StatusBanner component"
+    description = "Reusable status banner component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StatusBanner</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>StatusBanner</h1><p>Reusable status banner component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>9 props</span><span>0 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;StatusBanner type=&quot;info&quot; title=&quot;title&quot; description=&quot;description&quot; actionLabel=&quot;actionLabel&quot; actionHref=&quot;actionHref&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;StatusBanner&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;info&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionHref</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>dismissible</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>compact</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>details</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/StatusBanner.wrn</code></p><pre data-language="wrn"><code>component StatusBanner &#123;
+    props &#123;
+        class: string = &quot;&quot;
+        type = &quot;info&quot;
+
+        title = &quot;&quot;
+        description = &quot;&quot;
+
+        actionLabel = &quot;&quot;
+        actionHref = &quot;&quot;
+
+        dismissible = true
+        compact = false
+
+        details = []
+    &#125;
+
+    state visible = true
+
+    view &#123;
+        &lt;aside
+            role=&quot;&#123;type === 'error' ? 'alert' : 'status'&#125;&quot;
+            aria-live=&quot;&#123;type === 'error' ? 'assertive' : 'polite'&#125;&quot;
+            class=&quot;relative overflow-hidden &#123;class&#125;&quot;
+            class:hidden=&quot;!visible&quot;
+        &gt;
+            &lt;div
+                class=&quot; relative overflow-hidden rounded-2xl &#123;compact ? 'px-4 py-3' : 'px-5 py-4 sm:px-6'&#125; &#123;type === 'success' ? 'bg-emerald-50 text-emerald-950 ring-1 ring-inset ring-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-100 dark:ring-emerald-500/20' : type === 'warning' ? 'bg-amber-50 text-amber-950 ring-1 ring-inset ring-amber-200 dark:bg-amber-500/10 dark:text-amber-100 dark:ring-amber-500/20' : type === 'error' ? 'bg-rose-50 text-rose-950 ring-1 ring-inset ring-rose-200 dark:bg-rose-500/10 dark:text-rose-100 dark:ring-rose-500/20' : 'bg-indigo-50 text-indigo-950 ring-1 ring-inset ring-indigo-200 dark:bg-indigo-500/10 dark:text-indigo-100 dark:ring-indigo-500/20' &#125; &quot;
+            &gt;
+                &lt;!-- Decorative glow --&gt;
+                &lt;div aria-hidden=&quot;true&quot; class=&quot; pointer-events-none absolute -right-16 -top-20 h-40 w-40 rounded-full blur-3xl &#123;type === 'success' ? 'bg-emerald-300/30 dark:bg-emerald-500/10' : type === 'warning' ? 'bg-amber-300/30 dark:bg-amber-500/10' : type === 'error' ? 'bg-rose-300/30 dark:bg-rose-500/10' : 'bg-indigo-300/30 dark:bg-indigo-500/10' &#125; &quot; &gt;&lt;/div&gt;
+
+                &lt;div
+                    class=&quot;relative flex gap-4&quot;
+                    class:items-center=&quot;compact&quot;
+                    class:items-start=&quot;!compact&quot;
+                &gt;
+                    &lt;!-- Icon --&gt;
+                    &lt;span
+                        class=&quot; grid shrink-0 place-items-center rounded-xl &#123;compact ? 'h-9 w-9' : 'h-10 w-10'&#125; &#123;type === 'success' ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300' : type === 'warning' ? 'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300' : type === 'error' ? 'bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300' : 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300' &#125; &quot;
+                    &gt;
+                        &lt;span class=&quot; h-5 w-5 &#123;type === 'success' ? 'icon-[lucide--circle-check]' : type === 'warning' ? 'icon-[lucide--triangle-alert]' : type === 'error' ? 'icon-[lucide--circle-x]' : 'icon-[lucide--info]' &#125; &quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/span&gt;
+
+                    &lt;!-- Content --&gt;
+                    &lt;div class=&quot;min-w-0 flex-1&quot;&gt;
+                        &lt;div
+                            class=&quot;flex flex-col gap-3 sm:flex-row sm:justify-between&quot;
+                            class:sm:items-center=&quot;compact&quot;
+                            class:sm:items-start=&quot;!compact&quot;
+                        &gt;
+                            &lt;div class=&quot;min-w-0&quot;&gt;
+                                &lt;h2
+                                    class=&quot;font-bold&quot;
+                                    class:text-sm=&quot;compact&quot;
+                                    class:text-base=&quot;!compact&quot;
+                                    class:hidden=&quot;title === ''&quot;
+                                &gt;
+                                    &#123;title&#125;
+                                &lt;/h2&gt;
+
+                                &lt;p
+                                    class=&quot;text-sm leading-6 opacity-80&quot;
+                                    class:mt-1=&quot;title !== ''&quot;
+                                    class:hidden=&quot;description === ''&quot;
+                                &gt;
+                                    &#123;description&#125;
+                                &lt;/p&gt;
+                            &lt;/div&gt;
+
+                            &lt;!-- Actions --&gt;
+                            &lt;div class=&quot;flex shrink-0 items-center gap-2&quot;&gt;
+                                &lt;a
+                                    href=&quot;&#123;actionHref&#125;&quot;
+                                    class=&quot; h-9 items-center justify-center gap-1.5 rounded-lg px-3 text-xs font-bold transition &#123;type === 'success' ? 'bg-emerald-600 text-white hover:bg-emerald-500' : type === 'warning' ? 'bg-amber-600 text-white hover:bg-amber-500' : type === 'error' ? 'bg-rose-600 text-white hover:bg-rose-500' : 'bg-indigo-600 text-white hover:bg-indigo-500' &#125; &quot;
+                                    class:hidden=&quot;actionLabel === ''&quot;
+                                    class:inline-flex=&quot;actionLabel !== ''&quot;
+                                &gt;
+                                    &#123;actionLabel&#125;
+
+                                    &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/a&gt;
+
+                                &lt;button
+                                    type=&quot;button&quot;
+                                    @click=&quot;visible = false&quot;
+                                    aria-label=&quot;Dismiss notice&quot;
+                                    class=&quot;grid h-9 w-9 place-items-center rounded-lg opacity-60 transition hover:bg-black/5 hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-current dark:hover:bg-white/10&quot;
+                                    class:hidden=&quot;!dismissible&quot;
+                                &gt;
+                                    &lt;span class=&quot;icon-[lucide--x] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                                &lt;/button&gt;
+                            &lt;/div&gt;
+                        &lt;/div&gt;
+
+                        &lt;!-- Dynamic details --&gt;
+                        &lt;div
+                            class=&quot;mt-4 flex flex-wrap gap-x-5 gap-y-2 border-t pt-4 text-xs font-medium&quot;
+                            class:hidden=&quot;compact || details.length === 0&quot;
+                            class:border-emerald-200=&quot;type === 'success'&quot;
+                            class:border-amber-200=&quot;type === 'warning'&quot;
+                            class:border-rose-200=&quot;type === 'error'&quot;
+                            class:border-indigo-200=&quot;type === 'info'&quot;
+                            class:dark:border-emerald-500/20=&quot;type === 'success'&quot;
+                            class:dark:border-amber-500/20=&quot;type === 'warning'&quot;
+                            class:dark:border-rose-500/20=&quot;type === 'error'&quot;
+                            class:dark:border-indigo-500/20=&quot;type === 'info'&quot;
+                        &gt;
+                            &#123;#each details.slice(0, 4) as detail&#125;
+                            &lt;span class=&quot;inline-flex items-center gap-2 opacity-80&quot;&gt;
+                                &lt;span class=&quot;&#123;detail.iconClass&#125; h-3.5 w-3.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+
+                                &#123;detail.label&#125;
+                            &lt;/span&gt;
+                            &#123;/each&#125;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/aside&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/status-page-shell.wrn b/app/pages/components/status-page-shell.wrn
new file mode 100644
index 00000000..c6c27364
--- /dev/null
+++ b/app/pages/components/status-page-shell.wrn
@@ -0,0 +1,31 @@
+page StatusPageShellcomponent {
+  seo {
+    title = "StatusPageShell component"
+    description = "Reusable status page shell component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StatusPageShell</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>StatusPageShell</h1><p>Reusable status page shell component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;StatusPageShell eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;StatusPageShell&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/StatusPageShell.wrn</code></p><pre data-language="wrn"><code>component StatusPageShell &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/status-selector.wrn b/app/pages/components/status-selector.wrn
new file mode 100644
index 00000000..13455faa
--- /dev/null
+++ b/app/pages/components/status-selector.wrn
@@ -0,0 +1,37 @@
+page StatusSelectorcomponent {
+  seo {
+    title = "StatusSelector component"
+    description = "Reusable status selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StatusSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>StatusSelector</h1><p>Reusable status selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;StatusSelector label=&quot;Status&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;StatusSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Status&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/StatusSelector.wrn</code></p><pre data-language="wrn"><code>component StatusSelector &#123;
+  props &#123;
+    label = &quot;Status&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/status-subscribe-form.wrn b/app/pages/components/status-subscribe-form.wrn
new file mode 100644
index 00000000..2fbb19a8
--- /dev/null
+++ b/app/pages/components/status-subscribe-form.wrn
@@ -0,0 +1,34 @@
+page StatusSubscribeFormcomponent {
+  seo {
+    title = "StatusSubscribeForm component"
+    description = "Reusable status subscribe form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StatusSubscribeForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>StatusSubscribeForm</h1><p>Reusable status subscribe form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;StatusSubscribeForm eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;StatusSubscribeForm&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/StatusSubscribeForm.wrn</code></p><pre data-language="wrn"><code>component StatusSubscribeForm &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/status-table.wrn b/app/pages/components/status-table.wrn
new file mode 100644
index 00000000..ea1c1997
--- /dev/null
+++ b/app/pages/components/status-table.wrn
@@ -0,0 +1,31 @@
+page StatusTablecomponent {
+  seo {
+    title = "StatusTable component"
+    description = "Reusable status table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StatusTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>StatusTable</h1><p>Reusable status table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;StatusTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;StatusTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/StatusTable.wrn</code></p><pre data-language="wrn"><code>component StatusTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/step-navigation.wrn b/app/pages/components/step-navigation.wrn
new file mode 100644
index 00000000..493f463c
--- /dev/null
+++ b/app/pages/components/step-navigation.wrn
@@ -0,0 +1,31 @@
+page StepNavigationcomponent {
+  seo {
+    title = "StepNavigation component"
+    description = "Reusable step navigation component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StepNavigation</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>StepNavigation</h1><p>Reusable step navigation component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;StepNavigation eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;StepNavigation&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/StepNavigation.wrn</code></p><pre data-language="wrn"><code>component StepNavigation &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/step-up-authentication-dialog.wrn b/app/pages/components/step-up-authentication-dialog.wrn
new file mode 100644
index 00000000..7ce7b505
--- /dev/null
+++ b/app/pages/components/step-up-authentication-dialog.wrn
@@ -0,0 +1,31 @@
+page StepUpAuthenticationDialogcomponent {
+  seo {
+    title = "StepUpAuthenticationDialog component"
+    description = "Reusable step up authentication dialog component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StepUpAuthenticationDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>StepUpAuthenticationDialog</h1><p>Reusable step up authentication dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;StepUpAuthenticationDialog title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;StepUpAuthenticationDialog&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/StepUpAuthenticationDialog.wrn</code></p><pre data-language="wrn"><code>component StepUpAuthenticationDialog &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/stepper-input.wrn b/app/pages/components/stepper-input.wrn
new file mode 100644
index 00000000..74150020
--- /dev/null
+++ b/app/pages/components/stepper-input.wrn
@@ -0,0 +1,37 @@
+page StepperInputcomponent {
+  seo {
+    title = "StepperInput component"
+    description = "Reusable stepper input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StepperInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>StepperInput</h1><p>Reusable stepper input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;StepperInput label=&quot;Stepper&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;StepperInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Stepper&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/StepperInput.wrn</code></p><pre data-language="wrn"><code>component StepperInput &#123;
+  props &#123;
+    label = &quot;Stepper&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/stepper.wrn b/app/pages/components/stepper.wrn
new file mode 100644
index 00000000..0a75b46f
--- /dev/null
+++ b/app/pages/components/stepper.wrn
@@ -0,0 +1,34 @@
+page Steppercomponent {
+  seo {
+    title = "Stepper component"
+    description = "Reusable stepper component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Stepper</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>Stepper</h1><p>Reusable stepper component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Stepper eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Stepper&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Stepper.wrn</code></p><pre data-language="wrn"><code>component Stepper &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/sticker-picker.wrn b/app/pages/components/sticker-picker.wrn
new file mode 100644
index 00000000..1aad4340
--- /dev/null
+++ b/app/pages/components/sticker-picker.wrn
@@ -0,0 +1,37 @@
+page StickerPickercomponent {
+  seo {
+    title = "StickerPicker component"
+    description = "Reusable sticker picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StickerPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>StickerPicker</h1><p>Reusable sticker picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;StickerPicker label=&quot;Sticker&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;StickerPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Sticker&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/StickerPicker.wrn</code></p><pre data-language="wrn"><code>component StickerPicker &#123;
+  props &#123;
+    label = &quot;Sticker&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/sticky-layout.wrn b/app/pages/components/sticky-layout.wrn
new file mode 100644
index 00000000..466f4af4
--- /dev/null
+++ b/app/pages/components/sticky-layout.wrn
@@ -0,0 +1,27 @@
+page StickyLayoutcomponent {
+  seo {
+    title = "StickyLayout component"
+    description = "Reusable sticky layout component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StickyLayout</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>StickyLayout</h1><p>Reusable sticky layout component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;StickyLayout /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;StickyLayout&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/StickyLayout.wrn</code></p><pre data-language="wrn"><code>component StickyLayout &#123;
+  props &#123;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-sticky-layout &#123;class&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/sticky.wrn b/app/pages/components/sticky.wrn
new file mode 100644
index 00000000..e5b165be
--- /dev/null
+++ b/app/pages/components/sticky.wrn
@@ -0,0 +1,27 @@
+page Stickycomponent {
+  seo {
+    title = "Sticky component"
+    description = "Reusable sticky component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Sticky</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Sticky</h1><p>Reusable sticky component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Sticky /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Sticky&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Sticky.wrn</code></p><pre data-language="wrn"><code>component Sticky &#123;
+  props &#123;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-sticky &#123;class&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/street-address-input.wrn b/app/pages/components/street-address-input.wrn
new file mode 100644
index 00000000..ec6e8dab
--- /dev/null
+++ b/app/pages/components/street-address-input.wrn
@@ -0,0 +1,37 @@
+page StreetAddressInputcomponent {
+  seo {
+    title = "StreetAddressInput component"
+    description = "Reusable street address input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StreetAddressInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>StreetAddressInput</h1><p>Reusable street address input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;StreetAddressInput label=&quot;StreetAddress&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;StreetAddressInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;StreetAddress&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/StreetAddressInput.wrn</code></p><pre data-language="wrn"><code>component StreetAddressInput &#123;
+  props &#123;
+    label = &quot;StreetAddress&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/subdomain-input.wrn b/app/pages/components/subdomain-input.wrn
new file mode 100644
index 00000000..99c52c88
--- /dev/null
+++ b/app/pages/components/subdomain-input.wrn
@@ -0,0 +1,37 @@
+page SubdomainInputcomponent {
+  seo {
+    title = "SubdomainInput component"
+    description = "Reusable subdomain input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SubdomainInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>SubdomainInput</h1><p>Reusable subdomain input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SubdomainInput label=&quot;Subdomain&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SubdomainInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Subdomain&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SubdomainInput.wrn</code></p><pre data-language="wrn"><code>component SubdomainInput &#123;
+  props &#123;
+    label = &quot;Subdomain&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/subject-input.wrn b/app/pages/components/subject-input.wrn
new file mode 100644
index 00000000..b623afd8
--- /dev/null
+++ b/app/pages/components/subject-input.wrn
@@ -0,0 +1,37 @@
+page SubjectInputcomponent {
+  seo {
+    title = "SubjectInput component"
+    description = "Reusable subject input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SubjectInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>SubjectInput</h1><p>Reusable subject input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SubjectInput label=&quot;Subject&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SubjectInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Subject&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SubjectInput.wrn</code></p><pre data-language="wrn"><code>component SubjectInput &#123;
+  props &#123;
+    label = &quot;Subject&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/subprocessor-table.wrn b/app/pages/components/subprocessor-table.wrn
new file mode 100644
index 00000000..6257cd46
--- /dev/null
+++ b/app/pages/components/subprocessor-table.wrn
@@ -0,0 +1,31 @@
+page SubprocessorTablecomponent {
+  seo {
+    title = "SubprocessorTable component"
+    description = "Reusable subprocessor table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SubprocessorTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>SubprocessorTable</h1><p>Reusable subprocessor table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SubprocessorTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SubprocessorTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SubprocessorTable.wrn</code></p><pre data-language="wrn"><code>component SubprocessorTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/subsection-heading.wrn b/app/pages/components/subsection-heading.wrn
new file mode 100644
index 00000000..91a94131
--- /dev/null
+++ b/app/pages/components/subsection-heading.wrn
@@ -0,0 +1,29 @@
+page SubsectionHeadingcomponent {
+  seo {
+    title = "SubsectionHeading component"
+    description = "Reusable subsection heading component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SubsectionHeading</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>SubsectionHeading</h1><p>Reusable subsection heading component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SubsectionHeading text=&quot;text&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SubsectionHeading&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>text</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SubsectionHeading.wrn</code></p><pre data-language="wrn"><code>component SubsectionHeading &#123;
+  props &#123;
+    text = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-type wire-type--heading wire-text--&#123;align&#125;  &#123;class&#125;&quot;&gt;&#123;text&#125;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/success-card.wrn b/app/pages/components/success-card.wrn
new file mode 100644
index 00000000..0b6143d8
--- /dev/null
+++ b/app/pages/components/success-card.wrn
@@ -0,0 +1,30 @@
+page SuccessCardcomponent {
+  seo {
+    title = "SuccessCard component"
+    description = "Reusable success card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SuccessCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>SuccessCard</h1><p>Reusable success card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SuccessCard title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SuccessCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SuccessCard.wrn</code></p><pre data-language="wrn"><code>component SuccessCard &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card wire-catalog-card--success &#123;class&#125;&quot;&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-catalog-card__link&quot;&gt;&lt;span class=&quot;wire-visually-hidden&quot;&gt;Open &#123;title&#125;&lt;/span&gt;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/success-state.wrn b/app/pages/components/success-state.wrn
new file mode 100644
index 00000000..fa4399f7
--- /dev/null
+++ b/app/pages/components/success-state.wrn
@@ -0,0 +1,32 @@
+page SuccessStatecomponent {
+  seo {
+    title = "SuccessState component"
+    description = "Reusable success state component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SuccessState</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>SuccessState</h1><p>Reusable success state component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SuccessState label=&quot;Success&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SuccessState&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Success&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SuccessState.wrn</code></p><pre data-language="wrn"><code>component SuccessState &#123;
+  props &#123;
+    label = &quot;Success&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/support-request-form.wrn b/app/pages/components/support-request-form.wrn
new file mode 100644
index 00000000..dfbed0b0
--- /dev/null
+++ b/app/pages/components/support-request-form.wrn
@@ -0,0 +1,34 @@
+page SupportRequestFormcomponent {
+  seo {
+    title = "SupportRequestForm component"
+    description = "Reusable support request form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SupportRequestForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>SupportRequestForm</h1><p>Reusable support request form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SupportRequestForm eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SupportRequestForm&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SupportRequestForm.wrn</code></p><pre data-language="wrn"><code>component SupportRequestForm &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/surface.wrn b/app/pages/components/surface.wrn
new file mode 100644
index 00000000..e735441f
--- /dev/null
+++ b/app/pages/components/surface.wrn
@@ -0,0 +1,27 @@
+page Surfacecomponent {
+  seo {
+    title = "Surface component"
+    description = "Reusable surface component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Surface</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Surface</h1><p>Reusable surface component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Surface /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Surface&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Surface.wrn</code></p><pre data-language="wrn"><code>component Surface &#123;
+  props &#123;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-surface &#123;class&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/switch.wrn b/app/pages/components/switch.wrn
new file mode 100644
index 00000000..2d6403f5
--- /dev/null
+++ b/app/pages/components/switch.wrn
@@ -0,0 +1,36 @@
+page Switchcomponent {
+  seo {
+    title = "Switch component"
+    description = "Reusable switch component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Switch</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Switch</h1><p>Reusable switch component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>7 props</span><span>0 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Switch id=&quot;id&quot; name=&quot;name&quot; label=&quot;Switch&quot; description=&quot;description&quot; checked=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Switch&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Switch&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>checked</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Switch.wrn</code></p><pre data-language="wrn"><code>component Switch &#123;
+  props &#123;
+    class = &quot;&quot;
+    id = &quot;&quot;
+    name = &quot;&quot;
+    label = &quot;Switch&quot;
+    description = &quot;&quot;
+    checked = false
+    disabled = false
+  &#125;
+  state on = checked
+  view &#123;
+    &lt;button id=&quot;&#123;id&#125;&quot; type=&quot;button&quot; role=&quot;switch&quot; aria-checked=&quot;&#123;on&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; @click=&quot;on = !on&quot; class=&quot;flex w-full items-center justify-between gap-4 rounded-xl p-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 disabled:opacity-50 &#123;class&#125;&quot;&gt;&lt;span&gt;&lt;span class=&quot;block text-sm font-semibold&quot;&gt;&#123;label&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;text-sm text-slate-500&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;relative inline-flex h-6 w-11 shrink-0 rounded-full transition &#123;on ? 'bg-violet-600' : 'bg-slate-300 dark:bg-slate-700'&#125;&quot;&gt;&lt;span class=&quot;absolute top-0.5 size-5 rounded-full bg-white shadow transition-transform &#123;on ? 'translate-x-5' : 'translate-x-0.5'&#125;&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;input type=&quot;hidden&quot; name=&quot;&#123;name&#125;&quot; value=&quot;&#123;on ? 'true' : 'false'&#125;&quot; /&gt;&lt;/button&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/table-header.wrn b/app/pages/components/table-header.wrn
new file mode 100644
index 00000000..d1c40b24
--- /dev/null
+++ b/app/pages/components/table-header.wrn
@@ -0,0 +1,31 @@
+page TableHeadercomponent {
+  seo {
+    title = "TableHeader component"
+    description = "Reusable table header component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TableHeader</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>TableHeader</h1><p>Reusable table header component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TableHeader eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TableHeader&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TableHeader.wrn</code></p><pre data-language="wrn"><code>component TableHeader &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/table-row.wrn b/app/pages/components/table-row.wrn
new file mode 100644
index 00000000..f87ae509
--- /dev/null
+++ b/app/pages/components/table-row.wrn
@@ -0,0 +1,31 @@
+page TableRowcomponent {
+  seo {
+    title = "TableRow component"
+    description = "Reusable table row component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TableRow</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>TableRow</h1><p>Reusable table row component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TableRow title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TableRow&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TableRow.wrn</code></p><pre data-language="wrn"><code>component TableRow &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/table-skeleton.wrn b/app/pages/components/table-skeleton.wrn
new file mode 100644
index 00000000..3168ff5d
--- /dev/null
+++ b/app/pages/components/table-skeleton.wrn
@@ -0,0 +1,32 @@
+page TableSkeletoncomponent {
+  seo {
+    title = "TableSkeleton component"
+    description = "Reusable table skeleton component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TableSkeleton</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>TableSkeleton</h1><p>Reusable table skeleton component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TableSkeleton label=&quot;Table&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TableSkeleton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Table&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TableSkeleton.wrn</code></p><pre data-language="wrn"><code>component TableSkeleton &#123;
+  props &#123;
+    label = &quot;Table&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/table.wrn b/app/pages/components/table.wrn
new file mode 100644
index 00000000..13d46ca3
--- /dev/null
+++ b/app/pages/components/table.wrn
@@ -0,0 +1,31 @@
+page Tablecomponent {
+  seo {
+    title = "Table component"
+    description = "Reusable table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Table</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>Table</h1><p>Reusable table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Table caption=&quot;Data table&quot; responsive=&quot;true&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Table&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>caption</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Data table&quot;</code></td></tr><tr><td><code>responsive</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Table.wrn</code></p><pre data-language="wrn"><code>component Table &#123;
+  props &#123;
+    class = &quot;&quot;
+    caption = &quot;Data table&quot;
+    responsive = true
+  &#125;
+  view &#123;
+    &lt;div class=&quot;w-full overflow-x-auto rounded-2xl border border-slate-200 dark:border-slate-800 &#123;class&#125;&quot;&gt;&lt;table class=&quot;w-full min-w-[640px] border-collapse text-left text-sm&quot;&gt;&lt;caption class=&quot;sr-only&quot;&gt;&#123;caption&#125;&lt;/caption&gt;&lt;slot /&gt;&lt;/table&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/tabs.wrn b/app/pages/components/tabs.wrn
new file mode 100644
index 00000000..4bf2bc52
--- /dev/null
+++ b/app/pages/components/tabs.wrn
@@ -0,0 +1,31 @@
+page Tabscomponent {
+  seo {
+    title = "Tabs component"
+    description = "Reusable tabs component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Tabs</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>Tabs</h1><p>Reusable tabs component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>2 props</span><span>2 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Tabs active=&quot;first&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Tabs&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>active</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;first&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>first</code></li><li><code>second</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Tabs.wrn</code></p><pre data-language="wrn"><code>component Tabs &#123;
+  props &#123;
+    class = &quot;&quot;
+    active = &quot;first&quot;
+  &#125;
+  state current = active
+  view &#123;
+    &lt;div class=&quot;&#123;class&#125;&quot;&gt;&lt;div role=&quot;tablist&quot; class=&quot;flex gap-1 overflow-x-auto rounded-xl bg-slate-100 p-1 dark:bg-slate-800&quot;&gt;&lt;button role=&quot;tab&quot; aria-selected=&quot;&#123;current === 'first'&#125;&quot; @click=&quot;current = 'first'&quot; class=&quot;min-h-10 flex-1 rounded-lg px-4 text-sm font-semibold transition &#123;current === 'first' ? 'bg-white shadow dark:bg-slate-900' : 'text-slate-500'&#125;&quot;&gt;First&lt;/button&gt;&lt;button role=&quot;tab&quot; aria-selected=&quot;&#123;current === 'second'&#125;&quot; @click=&quot;current = 'second'&quot; class=&quot;min-h-10 flex-1 rounded-lg px-4 text-sm font-semibold transition &#123;current === 'second' ? 'bg-white shadow dark:bg-slate-900' : 'text-slate-500'&#125;&quot;&gt;Second&lt;/button&gt;&lt;/div&gt;&lt;div data-show=&quot;current === 'first'&quot; role=&quot;tabpanel&quot; class=&quot;pt-5&quot;&gt;&lt;slot name=&quot;first&quot; /&gt;&lt;/div&gt;&lt;div data-show=&quot;current === 'second'&quot; role=&quot;tabpanel&quot; class=&quot;pt-5&quot;&gt;&lt;slot name=&quot;second&quot; /&gt;&lt;/div&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/tag-input.wrn b/app/pages/components/tag-input.wrn
new file mode 100644
index 00000000..a2013d47
--- /dev/null
+++ b/app/pages/components/tag-input.wrn
@@ -0,0 +1,37 @@
+page TagInputcomponent {
+  seo {
+    title = "TagInput component"
+    description = "Reusable tag input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TagInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>TagInput</h1><p>Reusable tag input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TagInput label=&quot;Tag&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TagInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Tag&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TagInput.wrn</code></p><pre data-language="wrn"><code>component TagInput &#123;
+  props &#123;
+    label = &quot;Tag&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/tag.wrn b/app/pages/components/tag.wrn
new file mode 100644
index 00000000..56214104
--- /dev/null
+++ b/app/pages/components/tag.wrn
@@ -0,0 +1,32 @@
+page tagcomponent {
+  seo {
+    title = "tag component"
+    description = "Reusable tag component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">tag</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>tag</h1><p>Reusable tag component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;tag label=&quot;label&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;tag&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/tag.wrn</code></p><pre data-language="wrn"><code>// Small tag / chip. variant: default | primary | success | danger | warning.
+component Tag &#123;
+  props &#123;
+    label = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;span class=&quot;wire-tag wire-tag--&#123;variant&#125; &#123;class&#125;&quot;&gt;&lt;slot&gt;&#123;label&#125;&lt;/slot&gt;&lt;/span&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/tax-notice.wrn b/app/pages/components/tax-notice.wrn
new file mode 100644
index 00000000..d3e2e844
--- /dev/null
+++ b/app/pages/components/tax-notice.wrn
@@ -0,0 +1,32 @@
+page TaxNoticecomponent {
+  seo {
+    title = "TaxNotice component"
+    description = "Reusable tax notice component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TaxNotice</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>TaxNotice</h1><p>Reusable tax notice component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TaxNotice label=&quot;Tax&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TaxNotice&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Tax&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TaxNotice.wrn</code></p><pre data-language="wrn"><code>component TaxNotice &#123;
+  props &#123;
+    label = &quot;Tax&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/tax-rate-input.wrn b/app/pages/components/tax-rate-input.wrn
new file mode 100644
index 00000000..6e90d623
--- /dev/null
+++ b/app/pages/components/tax-rate-input.wrn
@@ -0,0 +1,37 @@
+page TaxRateInputcomponent {
+  seo {
+    title = "TaxRateInput component"
+    description = "Reusable tax rate input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TaxRateInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>TaxRateInput</h1><p>Reusable tax rate input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TaxRateInput label=&quot;TaxRate&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TaxRateInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;TaxRate&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TaxRateInput.wrn</code></p><pre data-language="wrn"><code>component TaxRateInput &#123;
+  props &#123;
+    label = &quot;TaxRate&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/team-member-card.wrn b/app/pages/components/team-member-card.wrn
new file mode 100644
index 00000000..196d3244
--- /dev/null
+++ b/app/pages/components/team-member-card.wrn
@@ -0,0 +1,34 @@
+page TeamMemberCardcomponent {
+  seo {
+    title = "TeamMemberCard component"
+    description = "Reusable team member card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TeamMemberCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>TeamMemberCard</h1><p>Reusable team member card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TeamMemberCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TeamMemberCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TeamMemberCard.wrn</code></p><pre data-language="wrn"><code>component TeamMemberCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/team-size-selector.wrn b/app/pages/components/team-size-selector.wrn
new file mode 100644
index 00000000..c23ce1be
--- /dev/null
+++ b/app/pages/components/team-size-selector.wrn
@@ -0,0 +1,37 @@
+page TeamSizeSelectorcomponent {
+  seo {
+    title = "TeamSizeSelector component"
+    description = "Reusable team size selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TeamSizeSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>TeamSizeSelector</h1><p>Reusable team size selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TeamSizeSelector label=&quot;TeamSize&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TeamSizeSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;TeamSize&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TeamSizeSelector.wrn</code></p><pre data-language="wrn"><code>component TeamSizeSelector &#123;
+  props &#123;
+    label = &quot;TeamSize&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/template-card.wrn b/app/pages/components/template-card.wrn
new file mode 100644
index 00000000..6755bd1a
--- /dev/null
+++ b/app/pages/components/template-card.wrn
@@ -0,0 +1,30 @@
+page TemplateCardcomponent {
+  seo {
+    title = "TemplateCard component"
+    description = "Reusable template card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TemplateCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>TemplateCard</h1><p>Reusable template card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TemplateCard title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TemplateCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TemplateCard.wrn</code></p><pre data-language="wrn"><code>component TemplateCard &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card wire-catalog-card--template &#123;class&#125;&quot;&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-catalog-card__link&quot;&gt;&lt;span class=&quot;wire-visually-hidden&quot;&gt;Open &#123;title&#125;&lt;/span&gt;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/template-selector.wrn b/app/pages/components/template-selector.wrn
new file mode 100644
index 00000000..fbafa362
--- /dev/null
+++ b/app/pages/components/template-selector.wrn
@@ -0,0 +1,37 @@
+page TemplateSelectorcomponent {
+  seo {
+    title = "TemplateSelector component"
+    description = "Reusable template selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TemplateSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>TemplateSelector</h1><p>Reusable template selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TemplateSelector label=&quot;Template&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TemplateSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Template&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TemplateSelector.wrn</code></p><pre data-language="wrn"><code>component TemplateSelector &#123;
+  props &#123;
+    label = &quot;Template&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/template-variable-input.wrn b/app/pages/components/template-variable-input.wrn
new file mode 100644
index 00000000..028b4ce8
--- /dev/null
+++ b/app/pages/components/template-variable-input.wrn
@@ -0,0 +1,37 @@
+page TemplateVariableInputcomponent {
+  seo {
+    title = "TemplateVariableInput component"
+    description = "Reusable template variable input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TemplateVariableInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>TemplateVariableInput</h1><p>Reusable template variable input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TemplateVariableInput label=&quot;TemplateVariable&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TemplateVariableInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;TemplateVariable&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TemplateVariableInput.wrn</code></p><pre data-language="wrn"><code>component TemplateVariableInput &#123;
+  props &#123;
+    label = &quot;TemplateVariable&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/tenant-isolation-diagram.wrn b/app/pages/components/tenant-isolation-diagram.wrn
new file mode 100644
index 00000000..ecb7bcb5
--- /dev/null
+++ b/app/pages/components/tenant-isolation-diagram.wrn
@@ -0,0 +1,32 @@
+page TenantIsolationDiagramcomponent {
+  seo {
+    title = "TenantIsolationDiagram component"
+    description = "Reusable tenant isolation diagram component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TenantIsolationDiagram</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>TenantIsolationDiagram</h1><p>Reusable tenant isolation diagram component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TenantIsolationDiagram title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TenantIsolationDiagram&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TenantIsolationDiagram.wrn</code></p><pre data-language="wrn"><code>component TenantIsolationDiagram &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/terminal-block.wrn b/app/pages/components/terminal-block.wrn
new file mode 100644
index 00000000..0de6c1b8
--- /dev/null
+++ b/app/pages/components/terminal-block.wrn
@@ -0,0 +1,34 @@
+page TerminalBlockcomponent {
+  seo {
+    title = "TerminalBlock component"
+    description = "Reusable terminal block component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TerminalBlock</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>TerminalBlock</h1><p>Reusable terminal block component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TerminalBlock eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TerminalBlock&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TerminalBlock.wrn</code></p><pre data-language="wrn"><code>component TerminalBlock &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/tertiary-button.wrn b/app/pages/components/tertiary-button.wrn
new file mode 100644
index 00000000..29c0c740
--- /dev/null
+++ b/app/pages/components/tertiary-button.wrn
@@ -0,0 +1,30 @@
+page TertiaryButtoncomponent {
+  seo {
+    title = "TertiaryButton component"
+    description = "Reusable tertiary button component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TertiaryButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>TertiaryButton</h1><p>Reusable tertiary button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TertiaryButton label=&quot;Action&quot; type=&quot;button&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TertiaryButton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TertiaryButton.wrn</code></p><pre data-language="wrn"><code>component TertiaryButton &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    type = &quot;button&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;button type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--ghost &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/test-message-dialog.wrn b/app/pages/components/test-message-dialog.wrn
new file mode 100644
index 00000000..01431077
--- /dev/null
+++ b/app/pages/components/test-message-dialog.wrn
@@ -0,0 +1,31 @@
+page TestMessageDialogcomponent {
+  seo {
+    title = "TestMessageDialog component"
+    description = "Reusable test message dialog component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TestMessageDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>TestMessageDialog</h1><p>Reusable test message dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TestMessageDialog title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TestMessageDialog&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TestMessageDialog.wrn</code></p><pre data-language="wrn"><code>component TestMessageDialog &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/testimonial-card.wrn b/app/pages/components/testimonial-card.wrn
new file mode 100644
index 00000000..aa19de4f
--- /dev/null
+++ b/app/pages/components/testimonial-card.wrn
@@ -0,0 +1,34 @@
+page TestimonialCardcomponent {
+  seo {
+    title = "TestimonialCard component"
+    description = "Reusable testimonial card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TestimonialCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>TestimonialCard</h1><p>Reusable testimonial card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TestimonialCard quote=&quot;Great product.&quot; name=&quot;Customer&quot; role=&quot;role&quot; company=&quot;company&quot; avatar=&quot;avatar&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TestimonialCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>quote</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Great product.&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Customer&quot;</code></td></tr><tr><td><code>role</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>company</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>avatar</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TestimonialCard.wrn</code></p><pre data-language="wrn"><code>component TestimonialCard &#123;
+  props &#123;
+    class = &quot;&quot;
+    quote = &quot;Great product.&quot;
+    name = &quot;Customer&quot;
+    role = &quot;&quot;
+    company = &quot;&quot;
+    avatar = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;figure class=&quot;rounded-3xl border border-slate-200 bg-white p-7 shadow-sm dark:border-slate-800 dark:bg-slate-900 &#123;class&#125;&quot;&gt;&lt;blockquote class=&quot;text-lg leading-8 text-slate-700 dark:text-slate-200&quot;&gt;“&#123;quote&#125;”&lt;/blockquote&gt;&lt;figcaption class=&quot;mt-6 flex items-center gap-3&quot;&gt;&lt;Avatar src=&quot;&#123;avatar&#125;&quot; initials=&quot;&#123;name.slice(0,2)&#125;&quot; /&gt;&lt;div&gt;&lt;div class=&quot;font-semibold&quot;&gt;&#123;name&#125;&lt;/div&gt;&lt;div class=&quot;text-sm text-slate-500&quot;&gt;&#123;role&#125;&lt;span data-show=&quot;company&quot;&gt; · &#123;company&#125;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/figcaption&gt;&lt;/figure&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/testimonial-carousel.wrn b/app/pages/components/testimonial-carousel.wrn
new file mode 100644
index 00000000..f2e2cc10
--- /dev/null
+++ b/app/pages/components/testimonial-carousel.wrn
@@ -0,0 +1,34 @@
+page TestimonialCarouselcomponent {
+  seo {
+    title = "TestimonialCarousel component"
+    description = "Reusable testimonial carousel component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TestimonialCarousel</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>TestimonialCarousel</h1><p>Reusable testimonial carousel component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TestimonialCarousel eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TestimonialCarousel&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TestimonialCarousel.wrn</code></p><pre data-language="wrn"><code>component TestimonialCarousel &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/text-input.wrn b/app/pages/components/text-input.wrn
new file mode 100644
index 00000000..b3f46f9d
--- /dev/null
+++ b/app/pages/components/text-input.wrn
@@ -0,0 +1,45 @@
+page TextInputcomponent {
+  seo {
+    title = "TextInput component"
+    description = "Reusable text input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TextInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>TextInput</h1><p>Reusable text input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>12 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TextInput id=&quot;id&quot; name=&quot;name&quot; label=&quot;Text&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TextInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Text&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>autocomplete</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TextInput.wrn</code></p><pre data-language="wrn"><code>component TextInput &#123;
+  props &#123;
+    class = &quot;&quot;
+    id = &quot;&quot;
+    name = &quot;&quot;
+    label = &quot;Text&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    help = &quot;&quot;
+    error = &quot;&quot;
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;space-y-2 &#123;class&#125;&quot;&gt;
+      &lt;label for=&quot;&#123;id&#125;&quot; class=&quot;block text-sm font-semibold text-slate-800 dark:text-slate-200&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;ml-1 text-red-500&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
+      &lt;input id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; type=&quot;text&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; autocomplete=&quot;&#123;autocomplete&#125;&quot; aria-invalid=&quot;&#123;!!error&#125;&quot; aria-describedby=&quot;&#123;id&#125;-help &#123;id&#125;-error&quot; class=&quot;min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white &#123;error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'&#125;&quot; /&gt;
+      &lt;p id=&quot;&#123;id&#125;-help&quot; data-show=&quot;help &amp;&amp; !error&quot; class=&quot;text-sm text-slate-500 dark:text-slate-400&quot;&gt;&#123;help&#125;&lt;/p&gt;
+      &lt;p id=&quot;&#123;id&#125;-error&quot; data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;text-sm font-medium text-red-600 dark:text-red-400&quot;&gt;&#123;error&#125;&lt;/p&gt;
+    &lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/text-link.wrn b/app/pages/components/text-link.wrn
new file mode 100644
index 00000000..e1300b28
--- /dev/null
+++ b/app/pages/components/text-link.wrn
@@ -0,0 +1,32 @@
+page TextLinkcomponent {
+  seo {
+    title = "TextLink component"
+    description = "Reusable text link component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TextLink</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>TextLink</h1><p>Reusable text link component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TextLink label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TextLink&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TextLink.wrn</code></p><pre data-language="wrn"><code>component TextLink &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/text-skeleton.wrn b/app/pages/components/text-skeleton.wrn
new file mode 100644
index 00000000..6e376b38
--- /dev/null
+++ b/app/pages/components/text-skeleton.wrn
@@ -0,0 +1,32 @@
+page TextSkeletoncomponent {
+  seo {
+    title = "TextSkeleton component"
+    description = "Reusable text skeleton component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TextSkeleton</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>TextSkeleton</h1><p>Reusable text skeleton component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TextSkeleton label=&quot;Text&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TextSkeleton&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Text&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TextSkeleton.wrn</code></p><pre data-language="wrn"><code>component TextSkeleton &#123;
+  props &#123;
+    label = &quot;Text&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/textarea.wrn b/app/pages/components/textarea.wrn
new file mode 100644
index 00000000..272b07e3
--- /dev/null
+++ b/app/pages/components/textarea.wrn
@@ -0,0 +1,39 @@
+page Textareacomponent {
+  seo {
+    title = "Textarea component"
+    description = "Reusable textarea component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Textarea</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Textarea</h1><p>Reusable textarea component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Textarea id=&quot;id&quot; name=&quot;name&quot; label=&quot;Message&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Textarea&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Message&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>rows</code></td><td><code>number</code></td><td>Optional</td><td><code>5</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Textarea.wrn</code></p><pre data-language="wrn"><code>component Textarea &#123;
+  props &#123;
+    class = &quot;&quot;
+    id = &quot;&quot;
+    name = &quot;&quot;
+    label = &quot;Message&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    rows = 5
+    help = &quot;&quot;
+    error = &quot;&quot;
+    required = false
+    disabled = false
+  &#125;
+  view &#123;
+    &lt;div class=&quot;space-y-2 &#123;class&#125;&quot;&gt;&lt;label for=&quot;&#123;id&#125;&quot; class=&quot;block text-sm font-semibold text-slate-800 dark:text-slate-200&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;ml-1 text-red-500&quot;&gt;*&lt;/span&gt;&lt;/label&gt;&lt;textarea id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; rows=&quot;&#123;rows&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; aria-invalid=&quot;&#123;!!error&#125;&quot; class=&quot;w-full resize-y rounded-xl border bg-white px-3.5 py-3 text-slate-950 shadow-sm outline-none transition focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 dark:bg-slate-950 dark:text-white &#123;error ? 'border-red-500' : 'border-slate-300 dark:border-slate-700'&#125;&quot;&gt;&#123;value&#125;&lt;/textarea&gt;&lt;p data-show=&quot;help &amp;&amp; !error&quot; class=&quot;text-sm text-slate-500&quot;&gt;&#123;help&#125;&lt;/p&gt;&lt;p data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;text-sm font-medium text-red-600&quot;&gt;&#123;error&#125;&lt;/p&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/theme-color-picker.wrn b/app/pages/components/theme-color-picker.wrn
new file mode 100644
index 00000000..9b90613c
--- /dev/null
+++ b/app/pages/components/theme-color-picker.wrn
@@ -0,0 +1,37 @@
+page ThemeColorPickercomponent {
+  seo {
+    title = "ThemeColorPicker component"
+    description = "Reusable theme color picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ThemeColorPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ThemeColorPicker</h1><p>Reusable theme color picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ThemeColorPicker label=&quot;ThemeColor&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ThemeColorPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;ThemeColor&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ThemeColorPicker.wrn</code></p><pre data-language="wrn"><code>component ThemeColorPicker &#123;
+  props &#123;
+    label = &quot;ThemeColor&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/theme-switcher.wrn b/app/pages/components/theme-switcher.wrn
new file mode 100644
index 00000000..912c5164
--- /dev/null
+++ b/app/pages/components/theme-switcher.wrn
@@ -0,0 +1,34 @@
+page ThemeSwitchercomponent {
+  seo {
+    title = "ThemeSwitcher component"
+    description = "Reusable theme switcher component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ThemeSwitcher</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ThemeSwitcher</h1><p>Reusable theme switcher component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ThemeSwitcher eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ThemeSwitcher&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ThemeSwitcher.wrn</code></p><pre data-language="wrn"><code>component ThemeSwitcher &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/theme-toggle.wrn b/app/pages/components/theme-toggle.wrn
new file mode 100644
index 00000000..d9ec60d7
--- /dev/null
+++ b/app/pages/components/theme-toggle.wrn
@@ -0,0 +1,32 @@
+page themetogglecomponent {
+  seo {
+    title = "theme-toggle component"
+    description = "Reusable theme-toggle component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">theme-toggle</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>theme-toggle</h1><p>Reusable theme-toggle component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>2 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;theme-toggle label=&quot;Toggle theme&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;theme-toggle&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Toggle theme&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/theme-toggle.wrn</code></p><pre data-language="wrn"><code>// Theme switch button. The framework's theme runtime binds the click
+// (data-wire-theme-toggle), so no component JS is needed.
+component ThemeToggle &#123;
+  props &#123;
+    label = &quot;Toggle theme&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost &#123;class&#125;&quot; data-wire-theme-toggle&gt;&lt;slot&gt;&#123;label&#125;&lt;/slot&gt;&lt;/button&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/time-input.wrn b/app/pages/components/time-input.wrn
new file mode 100644
index 00000000..52761720
--- /dev/null
+++ b/app/pages/components/time-input.wrn
@@ -0,0 +1,45 @@
+page TimeInputcomponent {
+  seo {
+    title = "TimeInput component"
+    description = "Reusable time input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TimeInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>TimeInput</h1><p>Reusable time input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>12 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TimeInput id=&quot;id&quot; name=&quot;name&quot; label=&quot;Time&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TimeInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Time&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>autocomplete</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TimeInput.wrn</code></p><pre data-language="wrn"><code>component TimeInput &#123;
+  props &#123;
+    class = &quot;&quot;
+    id = &quot;&quot;
+    name = &quot;&quot;
+    label = &quot;Time&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    help = &quot;&quot;
+    error = &quot;&quot;
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;space-y-2 &#123;class&#125;&quot;&gt;
+      &lt;label for=&quot;&#123;id&#125;&quot; class=&quot;block text-sm font-semibold text-slate-800 dark:text-slate-200&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;ml-1 text-red-500&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
+      &lt;input id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; type=&quot;time&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; autocomplete=&quot;&#123;autocomplete&#125;&quot; aria-invalid=&quot;&#123;!!error&#125;&quot; aria-describedby=&quot;&#123;id&#125;-help &#123;id&#125;-error&quot; class=&quot;min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white &#123;error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'&#125;&quot; /&gt;
+      &lt;p id=&quot;&#123;id&#125;-help&quot; data-show=&quot;help &amp;&amp; !error&quot; class=&quot;text-sm text-slate-500 dark:text-slate-400&quot;&gt;&#123;help&#125;&lt;/p&gt;
+      &lt;p id=&quot;&#123;id&#125;-error&quot; data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;text-sm font-medium text-red-600 dark:text-red-400&quot;&gt;&#123;error&#125;&lt;/p&gt;
+    &lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/time-picker.wrn b/app/pages/components/time-picker.wrn
new file mode 100644
index 00000000..8025e361
--- /dev/null
+++ b/app/pages/components/time-picker.wrn
@@ -0,0 +1,36 @@
+page TimePickercomponent {
+  seo {
+    title = "TimePicker component"
+    description = "Reusable time picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TimePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>TimePicker</h1><p>Reusable time picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>10 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TimePicker id=&quot;time-picker&quot; name=&quot;time&quot; label=&quot;Time&quot; value=&quot;value&quot; min=&quot;min&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TimePicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;time-picker&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;time&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Time&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>step</code></td><td><code>number</code></td><td>Optional</td><td><code>60</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TimePicker.wrn</code></p><pre data-language="wrn"><code>component TimePicker &#123;
+  props &#123;
+    id = &quot;time-picker&quot;
+    name = &quot;time&quot;
+    label = &quot;Time&quot;
+    value = &quot;&quot;
+    min = &quot;&quot;
+    max = &quot;&quot;
+    step = 60
+    required = false
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-field &#123;class&#125;&quot;&gt;&lt;label for=&quot;&#123;id&#125;&quot; class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;/label&gt;&lt;input id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; type=&quot;time&quot; value=&quot;&#123;value&#125;&quot; min=&quot;&#123;min&#125;&quot; max=&quot;&#123;max&#125;&quot; step=&quot;&#123;step&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/time-range-picker.wrn b/app/pages/components/time-range-picker.wrn
new file mode 100644
index 00000000..ca02c659
--- /dev/null
+++ b/app/pages/components/time-range-picker.wrn
@@ -0,0 +1,37 @@
+page TimeRangePickercomponent {
+  seo {
+    title = "TimeRangePicker component"
+    description = "Reusable time range picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TimeRangePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>TimeRangePicker</h1><p>Reusable time range picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TimeRangePicker label=&quot;TimeRange&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TimeRangePicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;TimeRange&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TimeRangePicker.wrn</code></p><pre data-language="wrn"><code>component TimeRangePicker &#123;
+  props &#123;
+    label = &quot;TimeRange&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/timeline-chart.wrn b/app/pages/components/timeline-chart.wrn
new file mode 100644
index 00000000..52bae10d
--- /dev/null
+++ b/app/pages/components/timeline-chart.wrn
@@ -0,0 +1,32 @@
+page TimelineChartcomponent {
+  seo {
+    title = "TimelineChart component"
+    description = "Reusable timeline chart component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TimelineChart</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>TimelineChart</h1><p>Reusable timeline chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TimelineChart title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TimelineChart&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TimelineChart.wrn</code></p><pre data-language="wrn"><code>component TimelineChart &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/timeline-item.wrn b/app/pages/components/timeline-item.wrn
new file mode 100644
index 00000000..5fff1c8e
--- /dev/null
+++ b/app/pages/components/timeline-item.wrn
@@ -0,0 +1,33 @@
+page TimelineItemcomponent {
+  seo {
+    title = "TimelineItem component"
+    description = "Reusable timeline item component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TimelineItem</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>TimelineItem</h1><p>Reusable timeline item component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TimelineItem title=&quot;Event&quot; date=&quot;date&quot; description=&quot;description&quot; status=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TimelineItem&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Event&quot;</code></td></tr><tr><td><code>date</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>status</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TimelineItem.wrn</code></p><pre data-language="wrn"><code>component TimelineItem &#123;
+  props &#123;
+    class = &quot;&quot;
+    title = &quot;Event&quot;
+    date = &quot;&quot;
+    description = &quot;&quot;
+    status = &quot;default&quot;
+  &#125;
+  view &#123;
+    &lt;li class=&quot;relative &#123;class&#125;&quot;&gt;&lt;span class=&quot;absolute -left-[1.85rem] top-1 size-3 rounded-full ring-4 ring-white dark:ring-slate-950 &#123;status === 'success' ? 'bg-emerald-500' : status === 'warning' ? 'bg-amber-500' : 'bg-violet-500'&#125;&quot;&gt;&lt;/span&gt;&lt;div class=&quot;flex flex-wrap items-baseline justify-between gap-2&quot;&gt;&lt;h3 class=&quot;font-semibold&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;time class=&quot;text-xs text-slate-500&quot;&gt;&#123;date&#125;&lt;/time&gt;&lt;/div&gt;&lt;p data-show=&quot;description&quot; class=&quot;mt-1 text-sm text-slate-500&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/li&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/timeline.wrn b/app/pages/components/timeline.wrn
new file mode 100644
index 00000000..e2c5b36a
--- /dev/null
+++ b/app/pages/components/timeline.wrn
@@ -0,0 +1,30 @@
+page Timelinecomponent {
+  seo {
+    title = "Timeline component"
+    description = "Reusable timeline component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Timeline</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>Timeline</h1><p>Reusable timeline component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>2 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Timeline title=&quot;Timeline&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Timeline&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Timeline&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Timeline.wrn</code></p><pre data-language="wrn"><code>component Timeline &#123;
+  props &#123;
+    class = &quot;&quot;
+    title = &quot;Timeline&quot;
+  &#125;
+  view &#123;
+    &lt;section class=&quot;&#123;class&#125;&quot;&gt;&lt;h2 class=&quot;text-lg font-bold&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;ol class=&quot;mt-5 border-l border-slate-200 pl-6 dark:border-slate-800&quot;&gt;&lt;slot /&gt;&lt;/ol&gt;&lt;/section&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/timeout-input.wrn b/app/pages/components/timeout-input.wrn
new file mode 100644
index 00000000..be6b4974
--- /dev/null
+++ b/app/pages/components/timeout-input.wrn
@@ -0,0 +1,37 @@
+page TimeoutInputcomponent {
+  seo {
+    title = "TimeoutInput component"
+    description = "Reusable timeout input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TimeoutInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>TimeoutInput</h1><p>Reusable timeout input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TimeoutInput label=&quot;Timeout&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TimeoutInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Timeout&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TimeoutInput.wrn</code></p><pre data-language="wrn"><code>component TimeoutInput &#123;
+  props &#123;
+    label = &quot;Timeout&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/timezone-aware-time-picker.wrn b/app/pages/components/timezone-aware-time-picker.wrn
new file mode 100644
index 00000000..ee7c3a5b
--- /dev/null
+++ b/app/pages/components/timezone-aware-time-picker.wrn
@@ -0,0 +1,37 @@
+page TimezoneAwareTimePickercomponent {
+  seo {
+    title = "TimezoneAwareTimePicker component"
+    description = "Reusable timezone aware time picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TimezoneAwareTimePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>TimezoneAwareTimePicker</h1><p>Reusable timezone aware time picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TimezoneAwareTimePicker label=&quot;TimezoneAwareTime&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TimezoneAwareTimePicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;TimezoneAwareTime&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TimezoneAwareTimePicker.wrn</code></p><pre data-language="wrn"><code>component TimezoneAwareTimePicker &#123;
+  props &#123;
+    label = &quot;TimezoneAwareTime&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/timezone-selector.wrn b/app/pages/components/timezone-selector.wrn
new file mode 100644
index 00000000..dd3209b1
--- /dev/null
+++ b/app/pages/components/timezone-selector.wrn
@@ -0,0 +1,32 @@
+page TimezoneSelectorcomponent {
+  seo {
+    title = "TimezoneSelector component"
+    description = "Reusable timezone selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TimezoneSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>TimezoneSelector</h1><p>Reusable timezone selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TimezoneSelector id=&quot;timezone&quot; name=&quot;timezone&quot; label=&quot;Timezone&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TimezoneSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;timezone&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;timezone&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Timezone&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TimezoneSelector.wrn</code></p><pre data-language="wrn"><code>component TimezoneSelector &#123;
+  props &#123;
+    class = &quot;&quot;
+    id = &quot;timezone&quot;
+    name = &quot;timezone&quot;
+    label = &quot;Timezone&quot;
+  &#125;
+  view &#123;
+    &lt;Select class=&quot;&#123;class&#125;&quot; id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; label=&quot;&#123;label&#125;&quot;&gt;&lt;option value=&quot;UTC&quot;&gt;UTC&lt;/option&gt;&lt;option value=&quot;Asia/Kolkata&quot;&gt;Asia/Kolkata&lt;/option&gt;&lt;option value=&quot;America/New_York&quot;&gt;America/New_York&lt;/option&gt;&lt;option value=&quot;Europe/London&quot;&gt;Europe/London&lt;/option&gt;&lt;/Select&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/toast-action.wrn b/app/pages/components/toast-action.wrn
new file mode 100644
index 00000000..33e7e16f
--- /dev/null
+++ b/app/pages/components/toast-action.wrn
@@ -0,0 +1,32 @@
+page ToastActioncomponent {
+  seo {
+    title = "ToastAction component"
+    description = "Reusable toast action component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ToastAction</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>ToastAction</h1><p>Reusable toast action component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ToastAction label=&quot;Action&quot; href=&quot;href&quot; type=&quot;button&quot; variant=&quot;primary&quot; disabled=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ToastAction&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Action&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ToastAction.wrn</code></p><pre data-language="wrn"><code>component ToastAction &#123;
+  props &#123;
+    label = &quot;Action&quot;
+    href = &quot;&quot;
+    type = &quot;button&quot;
+    variant = &quot;primary&quot;
+    disabled = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-catalog-action &#123;class&#125;&quot;&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/a&gt;&lt;button data-show=&quot;!href&quot; type=&quot;&#123;type&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; class=&quot;wire-btn wire-btn--&#123;variant&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/button&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/toast-host.wrn b/app/pages/components/toast-host.wrn
new file mode 100644
index 00000000..b0713edb
--- /dev/null
+++ b/app/pages/components/toast-host.wrn
@@ -0,0 +1,233 @@
+page ToastHostcomponent {
+  seo {
+    title = "ToastHost component"
+    description = "Reusable toast host component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ToastHost</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>ToastHost</h1><p>Reusable toast host component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>0 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ToastHost /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ToastHost&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ToastHost.wrn</code></p><pre data-language="wrn"><code>component ToastHost &#123;
+    props &#123;
+        class: string = &quot;&quot;
+    &#125;
+    state successOpen = false
+    state errorOpen = false
+    state warningOpen = false
+    state infoOpen = false
+
+    state successTitle = &quot;Changes saved&quot;
+    state successMessage = &quot;Your changes were saved successfully.&quot;
+
+    state errorTitle = &quot;Something went wrong&quot;
+    state errorMessage = &quot;We could not complete your request. Please try again.&quot;
+
+    state warningTitle = &quot;Action required&quot;
+    state warningMessage = &quot;Review the highlighted information before continuing.&quot;
+
+    state infoTitle = &quot;New update available&quot;
+    state infoMessage = &quot;A newer version of this feature is now available.&quot;
+
+    view &#123;
+        &lt;div
+            data-toast-host
+            aria-live=&quot;polite&quot;
+            aria-relevant=&quot;additions text&quot;
+            class=&quot;pointer-events-none fixed inset-x-0 top-0 z-[120] flex flex-col items-end gap-3 p-4 sm:left-auto sm:right-0 sm:w-full sm:max-w-md sm:p-6 &#123;class&#125;&quot;
+        &gt;
+            &lt;!-- Success toast --&gt;
+            &lt;article
+                role=&quot;status&quot;
+                class=&quot;pointer-events-auto relative w-full overflow-hidden rounded-2xl border border-emerald-200 bg-white shadow-2xl shadow-slate-950/15 dark:border-emerald-500/20 dark:bg-slate-900 dark:shadow-black/40&quot;
+                class:hidden=&quot;!successOpen&quot;
+                class:block=&quot;successOpen&quot;
+            &gt;
+                &lt;div class=&quot;absolute inset-y-0 left-0 w-1 bg-emerald-500&quot;&gt;&lt;/div&gt;
+
+                &lt;div class=&quot;flex items-start gap-3 p-4 pl-5&quot;&gt;
+                    &lt;span
+                        class=&quot;grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300&quot;
+                    &gt;
+                        &lt;span class=&quot;icon-[lucide--circle-check] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/span&gt;
+
+                    &lt;div class=&quot;min-w-0 flex-1 pt-0.5&quot;&gt;
+                        &lt;h3 class=&quot;text-sm font-bold text-slate-950 dark:text-white&quot;&gt;
+                            &#123;successTitle&#125;
+                        &lt;/h3&gt;
+
+                        &lt;p class=&quot;mt-1 text-sm leading-5 text-slate-600 dark:text-slate-400&quot;&gt;
+                            &#123;successMessage&#125;
+                        &lt;/p&gt;
+                    &lt;/div&gt;
+
+                    &lt;button
+                        type=&quot;button&quot;
+                        @click=&quot;successOpen = false&quot;
+                        aria-label=&quot;Dismiss notification&quot;
+                        class=&quot;grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 dark:hover:bg-white/10 dark:hover:text-white&quot;
+                    &gt;
+                        &lt;span class=&quot;icon-[lucide--x] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/button&gt;
+                &lt;/div&gt;
+
+                &lt;div class=&quot;h-1 w-full bg-emerald-100 dark:bg-emerald-500/10&quot;&gt;
+                    &lt;div class=&quot;h-full w-full origin-left bg-emerald-500&quot;&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/article&gt;
+
+            &lt;!-- Error toast --&gt;
+            &lt;article
+                role=&quot;alert&quot;
+                class=&quot;pointer-events-auto relative w-full overflow-hidden rounded-2xl border border-rose-200 bg-white shadow-2xl shadow-slate-950/15 dark:border-rose-500/20 dark:bg-slate-900 dark:shadow-black/40&quot;
+                class:hidden=&quot;!errorOpen&quot;
+                class:block=&quot;errorOpen&quot;
+            &gt;
+                &lt;div class=&quot;absolute inset-y-0 left-0 w-1 bg-rose-500&quot;&gt;&lt;/div&gt;
+
+                &lt;div class=&quot;flex items-start gap-3 p-4 pl-5&quot;&gt;
+                    &lt;span
+                        class=&quot;grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300&quot;
+                    &gt;
+                        &lt;span class=&quot;icon-[lucide--circle-x] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/span&gt;
+
+                    &lt;div class=&quot;min-w-0 flex-1 pt-0.5&quot;&gt;
+                        &lt;h3 class=&quot;text-sm font-bold text-slate-950 dark:text-white&quot;&gt;
+                            &#123;errorTitle&#125;
+                        &lt;/h3&gt;
+
+                        &lt;p class=&quot;mt-1 text-sm leading-5 text-slate-600 dark:text-slate-400&quot;&gt;
+                            &#123;errorMessage&#125;
+                        &lt;/p&gt;
+
+                        &lt;button
+                            type=&quot;button&quot;
+                            class=&quot;mt-3 inline-flex items-center gap-1.5 text-xs font-bold text-rose-700 transition hover:text-rose-900 dark:text-rose-300 dark:hover:text-rose-200&quot;
+                        &gt;
+                            Try again
+
+                            &lt;span class=&quot;icon-[lucide--rotate-cw] h-3.5 w-3.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                        &lt;/button&gt;
+                    &lt;/div&gt;
+
+                    &lt;button
+                        type=&quot;button&quot;
+                        @click=&quot;errorOpen = false&quot;
+                        aria-label=&quot;Dismiss notification&quot;
+                        class=&quot;grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-500 dark:hover:bg-white/10 dark:hover:text-white&quot;
+                    &gt;
+                        &lt;span class=&quot;icon-[lucide--x] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/button&gt;
+                &lt;/div&gt;
+
+                &lt;div class=&quot;h-1 w-full bg-rose-100 dark:bg-rose-500/10&quot;&gt;
+                    &lt;div class=&quot;h-full w-full origin-left bg-rose-500&quot;&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/article&gt;
+
+            &lt;!-- Warning toast --&gt;
+            &lt;article
+                role=&quot;status&quot;
+                class=&quot;pointer-events-auto relative w-full overflow-hidden rounded-2xl border border-amber-200 bg-white shadow-2xl shadow-slate-950/15 dark:border-amber-500/20 dark:bg-slate-900 dark:shadow-black/40&quot;
+                class:hidden=&quot;!warningOpen&quot;
+                class:block=&quot;warningOpen&quot;
+            &gt;
+                &lt;div class=&quot;absolute inset-y-0 left-0 w-1 bg-amber-500&quot;&gt;&lt;/div&gt;
+
+                &lt;div class=&quot;flex items-start gap-3 p-4 pl-5&quot;&gt;
+                    &lt;span
+                        class=&quot;grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300&quot;
+                    &gt;
+                        &lt;span class=&quot;icon-[lucide--triangle-alert] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/span&gt;
+
+                    &lt;div class=&quot;min-w-0 flex-1 pt-0.5&quot;&gt;
+                        &lt;h3 class=&quot;text-sm font-bold text-slate-950 dark:text-white&quot;&gt;
+                            &#123;warningTitle&#125;
+                        &lt;/h3&gt;
+
+                        &lt;p class=&quot;mt-1 text-sm leading-5 text-slate-600 dark:text-slate-400&quot;&gt;
+                            &#123;warningMessage&#125;
+                        &lt;/p&gt;
+                    &lt;/div&gt;
+
+                    &lt;button
+                        type=&quot;button&quot;
+                        @click=&quot;warningOpen = false&quot;
+                        aria-label=&quot;Dismiss notification&quot;
+                        class=&quot;grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-500 dark:hover:bg-white/10 dark:hover:text-white&quot;
+                    &gt;
+                        &lt;span class=&quot;icon-[lucide--x] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/button&gt;
+                &lt;/div&gt;
+
+                &lt;div class=&quot;h-1 w-full bg-amber-100 dark:bg-amber-500/10&quot;&gt;
+                    &lt;div class=&quot;h-full w-full origin-left bg-amber-500&quot;&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/article&gt;
+
+            &lt;!-- Information toast --&gt;
+            &lt;article
+                role=&quot;status&quot;
+                class=&quot;pointer-events-auto relative w-full overflow-hidden rounded-2xl border border-indigo-200 bg-white shadow-2xl shadow-slate-950/15 dark:border-indigo-500/20 dark:bg-slate-900 dark:shadow-black/40&quot;
+                class:hidden=&quot;!infoOpen&quot;
+                class:block=&quot;infoOpen&quot;
+            &gt;
+                &lt;div class=&quot;absolute inset-y-0 left-0 w-1 bg-indigo-500&quot;&gt;&lt;/div&gt;
+
+                &lt;div class=&quot;flex items-start gap-3 p-4 pl-5&quot;&gt;
+                    &lt;span
+                        class=&quot;grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300&quot;
+                    &gt;
+                        &lt;span class=&quot;icon-[lucide--info] h-5 w-5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/span&gt;
+
+                    &lt;div class=&quot;min-w-0 flex-1 pt-0.5&quot;&gt;
+                        &lt;h3 class=&quot;text-sm font-bold text-slate-950 dark:text-white&quot;&gt;
+                            &#123;infoTitle&#125;
+                        &lt;/h3&gt;
+
+                        &lt;p class=&quot;mt-1 text-sm leading-5 text-slate-600 dark:text-slate-400&quot;&gt;
+                            &#123;infoMessage&#125;
+                        &lt;/p&gt;
+
+                        &lt;a
+                            href=&quot;/changelog&quot;
+                            class=&quot;mt-3 inline-flex items-center gap-1.5 text-xs font-bold text-indigo-700 transition hover:text-indigo-900 dark:text-indigo-300 dark:hover:text-indigo-200&quot;
+                        &gt;
+                            View update
+
+                            &lt;span class=&quot;icon-[lucide--arrow-up-right] h-3.5 w-3.5&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                        &lt;/a&gt;
+                    &lt;/div&gt;
+
+                    &lt;button
+                        type=&quot;button&quot;
+                        @click=&quot;infoOpen = false&quot;
+                        aria-label=&quot;Dismiss notification&quot;
+                        class=&quot;grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:hover:bg-white/10 dark:hover:text-white&quot;
+                    &gt;
+                        &lt;span class=&quot;icon-[lucide--x] h-4 w-4&quot; aria-hidden=&quot;true&quot; &gt;&lt;/span&gt;
+                    &lt;/button&gt;
+                &lt;/div&gt;
+
+                &lt;div class=&quot;h-1 w-full bg-indigo-100 dark:bg-indigo-500/10&quot;&gt;
+                    &lt;div class=&quot;h-full w-full origin-left bg-indigo-500&quot;&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/article&gt;
+        &lt;/div&gt;
+    &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/toast-icon.wrn b/app/pages/components/toast-icon.wrn
new file mode 100644
index 00000000..920e1a51
--- /dev/null
+++ b/app/pages/components/toast-icon.wrn
@@ -0,0 +1,34 @@
+page ToastIconcomponent {
+  seo {
+    title = "ToastIcon component"
+    description = "Reusable toast icon component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ToastIcon</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ToastIcon</h1><p>Reusable toast icon component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ToastIcon eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ToastIcon&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ToastIcon.wrn</code></p><pre data-language="wrn"><code>component ToastIcon &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/toast-progress.wrn b/app/pages/components/toast-progress.wrn
new file mode 100644
index 00000000..0c17b567
--- /dev/null
+++ b/app/pages/components/toast-progress.wrn
@@ -0,0 +1,32 @@
+page ToastProgresscomponent {
+  seo {
+    title = "ToastProgress component"
+    description = "Reusable toast progress component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ToastProgress</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>ToastProgress</h1><p>Reusable toast progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ToastProgress title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ToastProgress&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ToastProgress.wrn</code></p><pre data-language="wrn"><code>component ToastProgress &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/toast.wrn b/app/pages/components/toast.wrn
new file mode 100644
index 00000000..acca39ad
--- /dev/null
+++ b/app/pages/components/toast.wrn
@@ -0,0 +1,34 @@
+page Toastcomponent {
+  seo {
+    title = "Toast component"
+    description = "Reusable toast component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Toast</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Toast</h1><p>Reusable toast component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>0 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Toast title=&quot;Saved&quot; description=&quot;description&quot; variant=&quot;success&quot; duration=&quot;5000&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Toast&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Saved&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;success&quot;</code></td></tr><tr><td><code>duration</code></td><td><code>number</code></td><td>Optional</td><td><code>5000</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Toast.wrn</code></p><pre data-language="wrn"><code>component Toast &#123;
+  props &#123;
+    class = &quot;&quot;
+    title = &quot;Saved&quot;
+    description = &quot;&quot;
+    variant = &quot;success&quot;
+    duration = 5000
+  &#125;
+  state visible = true
+  view &#123;
+    &lt;div data-show=&quot;visible&quot; role=&quot;status&quot; aria-live=&quot;polite&quot; class=&quot;pointer-events-auto flex w-full max-w-sm items-start gap-3 rounded-2xl border bg-white p-4 shadow-2xl dark:border-slate-800 dark:bg-slate-900 &#123;class&#125;&quot;&gt;&lt;span class=&quot;mt-0.5 flex size-8 items-center justify-center rounded-full &#123;variant === 'success' ? 'bg-emerald-100 text-emerald-700' : variant === 'danger' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'&#125;&quot;&gt;&#123;variant === 'success' ? '✓' : variant === 'danger' ? '!' : 'i'&#125;&lt;/span&gt;&lt;div class=&quot;min-w-0 flex-1&quot;&gt;&lt;p class=&quot;font-semibold&quot;&gt;&#123;title&#125;&lt;/p&gt;&lt;p data-show=&quot;description&quot; class=&quot;mt-1 text-sm text-slate-500&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Close&quot; @click=&quot;visible = false&quot; class=&quot;rounded-lg p-1 text-slate-400 hover:bg-slate-100&quot;&gt;×&lt;/button&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/toggle-group.wrn b/app/pages/components/toggle-group.wrn
new file mode 100644
index 00000000..52951e4e
--- /dev/null
+++ b/app/pages/components/toggle-group.wrn
@@ -0,0 +1,37 @@
+page ToggleGroupcomponent {
+  seo {
+    title = "ToggleGroup component"
+    description = "Reusable toggle group component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ToggleGroup</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ToggleGroup</h1><p>Reusable toggle group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ToggleGroup label=&quot;Toggle&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ToggleGroup&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Toggle&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ToggleGroup.wrn</code></p><pre data-language="wrn"><code>component ToggleGroup &#123;
+  props &#123;
+    label = &quot;Toggle&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/toggle.wrn b/app/pages/components/toggle.wrn
new file mode 100644
index 00000000..d841d673
--- /dev/null
+++ b/app/pages/components/toggle.wrn
@@ -0,0 +1,37 @@
+page Togglecomponent {
+  seo {
+    title = "Toggle component"
+    description = "Reusable toggle component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Toggle</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Toggle</h1><p>Reusable toggle component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Toggle label=&quot;label&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Toggle&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Toggle.wrn</code></p><pre data-language="wrn"><code>component Toggle &#123;
+  props &#123;
+    label = &quot;&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/token-input.wrn b/app/pages/components/token-input.wrn
new file mode 100644
index 00000000..3db7655d
--- /dev/null
+++ b/app/pages/components/token-input.wrn
@@ -0,0 +1,37 @@
+page TokenInputcomponent {
+  seo {
+    title = "TokenInput component"
+    description = "Reusable token input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TokenInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>TokenInput</h1><p>Reusable token input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TokenInput label=&quot;Token&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TokenInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Token&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TokenInput.wrn</code></p><pre data-language="wrn"><code>component TokenInput &#123;
+  props &#123;
+    label = &quot;Token&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/tooltip.wrn b/app/pages/components/tooltip.wrn
new file mode 100644
index 00000000..5147fb3f
--- /dev/null
+++ b/app/pages/components/tooltip.wrn
@@ -0,0 +1,31 @@
+page Tooltipcomponent {
+  seo {
+    title = "Tooltip component"
+    description = "Reusable tooltip component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Tooltip</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>Tooltip</h1><p>Reusable tooltip component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Tooltip text=&quot;Helpful information&quot; position=&quot;top&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Tooltip&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>text</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Helpful information&quot;</code></td></tr><tr><td><code>position</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;top&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Tooltip.wrn</code></p><pre data-language="wrn"><code>component Tooltip &#123;
+  props &#123;
+    class = &quot;&quot;
+    text = &quot;Helpful information&quot;
+    position = &quot;top&quot;
+  &#125;
+  view &#123;
+    &lt;span class=&quot;group relative inline-flex &#123;class&#125;&quot;&gt;&lt;slot /&gt;&lt;span role=&quot;tooltip&quot; class=&quot;pointer-events-none absolute z-40 w-max max-w-xs rounded-lg bg-slate-950 px-2.5 py-1.5 text-xs font-medium text-white opacity-0 shadow-lg transition duration-200 group-hover:opacity-100 group-focus-within:opacity-100 &#123;position === 'bottom' ? 'left-1/2 top-full mt-2 -translate-x-1/2' : 'bottom-full left-1/2 mb-2 -translate-x-1/2'&#125;&quot;&gt;&#123;text&#125;&lt;/span&gt;&lt;/span&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/totp-verification-form.wrn b/app/pages/components/totp-verification-form.wrn
new file mode 100644
index 00000000..ac30f994
--- /dev/null
+++ b/app/pages/components/totp-verification-form.wrn
@@ -0,0 +1,34 @@
+page TotpVerificationFormcomponent {
+  seo {
+    title = "TotpVerificationForm component"
+    description = "Reusable totp verification form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TotpVerificationForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>TotpVerificationForm</h1><p>Reusable totp verification form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TotpVerificationForm eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TotpVerificationForm&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TotpVerificationForm.wrn</code></p><pre data-language="wrn"><code>component TotpVerificationForm &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/translated-text.wrn b/app/pages/components/translated-text.wrn
new file mode 100644
index 00000000..b611c1fc
--- /dev/null
+++ b/app/pages/components/translated-text.wrn
@@ -0,0 +1,34 @@
+page TranslatedTextcomponent {
+  seo {
+    title = "TranslatedText component"
+    description = "Reusable translated text component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TranslatedText</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>TranslatedText</h1><p>Reusable translated text component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TranslatedText eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TranslatedText&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TranslatedText.wrn</code></p><pre data-language="wrn"><code>component TranslatedText &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/tree-table.wrn b/app/pages/components/tree-table.wrn
new file mode 100644
index 00000000..d53b7b92
--- /dev/null
+++ b/app/pages/components/tree-table.wrn
@@ -0,0 +1,31 @@
+page TreeTablecomponent {
+  seo {
+    title = "TreeTable component"
+    description = "Reusable tree table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TreeTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>TreeTable</h1><p>Reusable tree table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TreeTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TreeTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TreeTable.wrn</code></p><pre data-language="wrn"><code>component TreeTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/trend-indicator.wrn b/app/pages/components/trend-indicator.wrn
new file mode 100644
index 00000000..09d2edfa
--- /dev/null
+++ b/app/pages/components/trend-indicator.wrn
@@ -0,0 +1,32 @@
+page TrendIndicatorcomponent {
+  seo {
+    title = "TrendIndicator component"
+    description = "Reusable trend indicator component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TrendIndicator</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>TrendIndicator</h1><p>Reusable trend indicator component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TrendIndicator label=&quot;Trend&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TrendIndicator&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Trend&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TrendIndicator.wrn</code></p><pre data-language="wrn"><code>component TrendIndicator &#123;
+  props &#123;
+    label = &quot;Trend&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/truncated-text.wrn b/app/pages/components/truncated-text.wrn
new file mode 100644
index 00000000..98f576b4
--- /dev/null
+++ b/app/pages/components/truncated-text.wrn
@@ -0,0 +1,34 @@
+page TruncatedTextcomponent {
+  seo {
+    title = "TruncatedText component"
+    description = "Reusable truncated text component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TruncatedText</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>TruncatedText</h1><p>Reusable truncated text component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TruncatedText eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TruncatedText&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TruncatedText.wrn</code></p><pre data-language="wrn"><code>component TruncatedText &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/trust-badge-list.wrn b/app/pages/components/trust-badge-list.wrn
new file mode 100644
index 00000000..0a6d094e
--- /dev/null
+++ b/app/pages/components/trust-badge-list.wrn
@@ -0,0 +1,31 @@
+page TrustBadgeListcomponent {
+  seo {
+    title = "TrustBadgeList component"
+    description = "Reusable trust badge list component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TrustBadgeList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>TrustBadgeList</h1><p>Reusable trust badge list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TrustBadgeList title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TrustBadgeList&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TrustBadgeList.wrn</code></p><pre data-language="wrn"><code>component TrustBadgeList &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/typography.wrn b/app/pages/components/typography.wrn
new file mode 100644
index 00000000..8767093a
--- /dev/null
+++ b/app/pages/components/typography.wrn
@@ -0,0 +1,32 @@
+page Typographycomponent {
+  seo {
+    title = "Typography component"
+    description = "Reusable typography component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Typography</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Typography</h1><p>Reusable typography component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Typography as=&quot;p&quot; variant=&quot;body&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Typography&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>as</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;p&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;body&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Typography.wrn</code></p><pre data-language="wrn"><code>component Typography &#123;
+  props &#123;
+    as = &quot;p&quot;
+    variant = &quot;body&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;wire-type wire-type--&#123;variant&#125; wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/unavailable-region-state.wrn b/app/pages/components/unavailable-region-state.wrn
new file mode 100644
index 00000000..48b4e77f
--- /dev/null
+++ b/app/pages/components/unavailable-region-state.wrn
@@ -0,0 +1,32 @@
+page UnavailableRegionStatecomponent {
+  seo {
+    title = "UnavailableRegionState component"
+    description = "Reusable unavailable region state component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">UnavailableRegionState</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>UnavailableRegionState</h1><p>Reusable unavailable region state component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;UnavailableRegionState label=&quot;UnavailableRegion&quot; title=&quot;title&quot; description=&quot;description&quot; value=&quot;value&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;UnavailableRegionState&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;UnavailableRegion&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/UnavailableRegionState.wrn</code></p><pre data-language="wrn"><code>component UnavailableRegionState &#123;
+  props &#123;
+    label = &quot;UnavailableRegion&quot; 
+    title = &quot;&quot;
+    description = &quot;&quot;
+    value = &quot;&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;aside role=&quot;status&quot; class=&quot;wire-alert wire-alert--&#123;variant&#125; wire-catalog-feedback &#123;class&#125;&quot;&gt;&lt;strong data-show=&quot;title || label&quot;&gt;&#123;title || label&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-badge wire-badge--&#123;variant&#125;&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;/aside&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/unified-timeline-preview.wrn b/app/pages/components/unified-timeline-preview.wrn
new file mode 100644
index 00000000..dc77d020
--- /dev/null
+++ b/app/pages/components/unified-timeline-preview.wrn
@@ -0,0 +1,34 @@
+page UnifiedTimelinePreviewcomponent {
+  seo {
+    title = "UnifiedTimelinePreview component"
+    description = "Reusable unified timeline preview component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">UnifiedTimelinePreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>UnifiedTimelinePreview</h1><p>Reusable unified timeline preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;UnifiedTimelinePreview eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;UnifiedTimelinePreview&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/UnifiedTimelinePreview.wrn</code></p><pre data-language="wrn"><code>component UnifiedTimelinePreview &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/unsaved-changes-dialog.wrn b/app/pages/components/unsaved-changes-dialog.wrn
new file mode 100644
index 00000000..5e3c377c
--- /dev/null
+++ b/app/pages/components/unsaved-changes-dialog.wrn
@@ -0,0 +1,31 @@
+page UnsavedChangesDialogcomponent {
+  seo {
+    title = "UnsavedChangesDialog component"
+    description = "Reusable unsaved changes dialog component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">UnsavedChangesDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>UnsavedChangesDialog</h1><p>Reusable unsaved changes dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;UnsavedChangesDialog title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;UnsavedChangesDialog&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/UnsavedChangesDialog.wrn</code></p><pre data-language="wrn"><code>component UnsavedChangesDialog &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/upload-item.wrn b/app/pages/components/upload-item.wrn
new file mode 100644
index 00000000..a2d74010
--- /dev/null
+++ b/app/pages/components/upload-item.wrn
@@ -0,0 +1,34 @@
+page UploadItemcomponent {
+  seo {
+    title = "UploadItem component"
+    description = "Reusable upload item component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">UploadItem</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>UploadItem</h1><p>Reusable upload item component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;UploadItem eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;UploadItem&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/UploadItem.wrn</code></p><pre data-language="wrn"><code>component UploadItem &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/upload-preview.wrn b/app/pages/components/upload-preview.wrn
new file mode 100644
index 00000000..66c6797c
--- /dev/null
+++ b/app/pages/components/upload-preview.wrn
@@ -0,0 +1,34 @@
+page UploadPreviewcomponent {
+  seo {
+    title = "UploadPreview component"
+    description = "Reusable upload preview component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">UploadPreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>UploadPreview</h1><p>Reusable upload preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;UploadPreview eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;UploadPreview&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/UploadPreview.wrn</code></p><pre data-language="wrn"><code>component UploadPreview &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/upload-progress.wrn b/app/pages/components/upload-progress.wrn
new file mode 100644
index 00000000..1dbe4438
--- /dev/null
+++ b/app/pages/components/upload-progress.wrn
@@ -0,0 +1,32 @@
+page UploadProgresscomponent {
+  seo {
+    title = "UploadProgress component"
+    description = "Reusable upload progress component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">UploadProgress</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>UploadProgress</h1><p>Reusable upload progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;UploadProgress title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;UploadProgress&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/UploadProgress.wrn</code></p><pre data-language="wrn"><code>component UploadProgress &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/uptime-chart.wrn b/app/pages/components/uptime-chart.wrn
new file mode 100644
index 00000000..acd9abcb
--- /dev/null
+++ b/app/pages/components/uptime-chart.wrn
@@ -0,0 +1,32 @@
+page UptimeChartcomponent {
+  seo {
+    title = "UptimeChart component"
+    description = "Reusable uptime chart component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">UptimeChart</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>UptimeChart</h1><p>Reusable uptime chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;UptimeChart title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;UptimeChart&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/UptimeChart.wrn</code></p><pre data-language="wrn"><code>component UptimeChart &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/uptime-metric.wrn b/app/pages/components/uptime-metric.wrn
new file mode 100644
index 00000000..87cc8b8d
--- /dev/null
+++ b/app/pages/components/uptime-metric.wrn
@@ -0,0 +1,32 @@
+page UptimeMetriccomponent {
+  seo {
+    title = "UptimeMetric component"
+    description = "Reusable uptime metric component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">UptimeMetric</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>UptimeMetric</h1><p>Reusable uptime metric component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;UptimeMetric title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;UptimeMetric&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/UptimeMetric.wrn</code></p><pre data-language="wrn"><code>component UptimeMetric &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/url-input.wrn b/app/pages/components/url-input.wrn
new file mode 100644
index 00000000..358ab9cd
--- /dev/null
+++ b/app/pages/components/url-input.wrn
@@ -0,0 +1,45 @@
+page UrlInputcomponent {
+  seo {
+    title = "UrlInput component"
+    description = "Reusable url input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">UrlInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>UrlInput</h1><p>Reusable url input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>12 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;UrlInput id=&quot;id&quot; name=&quot;name&quot; label=&quot;Url&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;UrlInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Url&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>autocomplete</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/UrlInput.wrn</code></p><pre data-language="wrn"><code>component UrlInput &#123;
+  props &#123;
+    class = &quot;&quot;
+    id = &quot;&quot;
+    name = &quot;&quot;
+    label = &quot;Url&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    help = &quot;&quot;
+    error = &quot;&quot;
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;space-y-2 &#123;class&#125;&quot;&gt;
+      &lt;label for=&quot;&#123;id&#125;&quot; class=&quot;block text-sm font-semibold text-slate-800 dark:text-slate-200&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;ml-1 text-red-500&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
+      &lt;input id=&quot;&#123;id&#125;&quot; name=&quot;&#123;name&#125;&quot; type=&quot;url&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; autocomplete=&quot;&#123;autocomplete&#125;&quot; aria-invalid=&quot;&#123;!!error&#125;&quot; aria-describedby=&quot;&#123;id&#125;-help &#123;id&#125;-error&quot; class=&quot;min-h-11 w-full rounded-xl border bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:opacity-70 dark:bg-slate-950 dark:text-white &#123;error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/10' : 'border-slate-300 dark:border-slate-700'&#125;&quot; /&gt;
+      &lt;p id=&quot;&#123;id&#125;-help&quot; data-show=&quot;help &amp;&amp; !error&quot; class=&quot;text-sm text-slate-500 dark:text-slate-400&quot;&gt;&#123;help&#125;&lt;/p&gt;
+      &lt;p id=&quot;&#123;id&#125;-error&quot; data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;text-sm font-medium text-red-600 dark:text-red-400&quot;&gt;&#123;error&#125;&lt;/p&gt;
+    &lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/usage-pricing-table.wrn b/app/pages/components/usage-pricing-table.wrn
new file mode 100644
index 00000000..9d526fea
--- /dev/null
+++ b/app/pages/components/usage-pricing-table.wrn
@@ -0,0 +1,31 @@
+page UsagePricingTablecomponent {
+  seo {
+    title = "UsagePricingTable component"
+    description = "Reusable usage pricing table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">UsagePricingTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>UsagePricingTable</h1><p>Reusable usage pricing table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;UsagePricingTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;UsagePricingTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/UsagePricingTable.wrn</code></p><pre data-language="wrn"><code>component UsagePricingTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/use-case-selector.wrn b/app/pages/components/use-case-selector.wrn
new file mode 100644
index 00000000..aab75e31
--- /dev/null
+++ b/app/pages/components/use-case-selector.wrn
@@ -0,0 +1,37 @@
+page UseCaseSelectorcomponent {
+  seo {
+    title = "UseCaseSelector component"
+    description = "Reusable use case selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">UseCaseSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>UseCaseSelector</h1><p>Reusable use case selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;UseCaseSelector label=&quot;UseCase&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;UseCaseSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;UseCase&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/UseCaseSelector.wrn</code></p><pre data-language="wrn"><code>component UseCaseSelector &#123;
+  props &#123;
+    label = &quot;UseCase&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/user-card.wrn b/app/pages/components/user-card.wrn
new file mode 100644
index 00000000..1338e062
--- /dev/null
+++ b/app/pages/components/user-card.wrn
@@ -0,0 +1,30 @@
+page UserCardcomponent {
+  seo {
+    title = "UserCard component"
+    description = "Reusable user card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">UserCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>UserCard</h1><p>Reusable user card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;UserCard title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;UserCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/UserCard.wrn</code></p><pre data-language="wrn"><code>component UserCard &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card wire-catalog-card--user &#123;class&#125;&quot;&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-catalog-card__link&quot;&gt;&lt;span class=&quot;wire-visually-hidden&quot;&gt;Open &#123;title&#125;&lt;/span&gt;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/username-input.wrn b/app/pages/components/username-input.wrn
new file mode 100644
index 00000000..4f22dcf7
--- /dev/null
+++ b/app/pages/components/username-input.wrn
@@ -0,0 +1,37 @@
+page UsernameInputcomponent {
+  seo {
+    title = "UsernameInput component"
+    description = "Reusable username input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">UsernameInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>UsernameInput</h1><p>Reusable username input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;UsernameInput label=&quot;Username&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;UsernameInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Username&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/UsernameInput.wrn</code></p><pre data-language="wrn"><code>component UsernameInput &#123;
+  props &#123;
+    label = &quot;Username&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/value-card.wrn b/app/pages/components/value-card.wrn
new file mode 100644
index 00000000..a9db14b9
--- /dev/null
+++ b/app/pages/components/value-card.wrn
@@ -0,0 +1,34 @@
+page ValueCardcomponent {
+  seo {
+    title = "ValueCard component"
+    description = "Reusable value card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ValueCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ValueCard</h1><p>Reusable value card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ValueCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ValueCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ValueCard.wrn</code></p><pre data-language="wrn"><code>component ValueCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/values-grid.wrn b/app/pages/components/values-grid.wrn
new file mode 100644
index 00000000..a4f72e5d
--- /dev/null
+++ b/app/pages/components/values-grid.wrn
@@ -0,0 +1,31 @@
+page ValuesGridcomponent {
+  seo {
+    title = "ValuesGrid component"
+    description = "Reusable values grid component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ValuesGrid</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ValuesGrid</h1><p>Reusable values grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ValuesGrid title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ValuesGrid&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ValuesGrid.wrn</code></p><pre data-language="wrn"><code>component ValuesGrid &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/verification-code-input.wrn b/app/pages/components/verification-code-input.wrn
new file mode 100644
index 00000000..48a1c582
--- /dev/null
+++ b/app/pages/components/verification-code-input.wrn
@@ -0,0 +1,37 @@
+page VerificationCodeInputcomponent {
+  seo {
+    title = "VerificationCodeInput component"
+    description = "Reusable verification code input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">VerificationCodeInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>VerificationCodeInput</h1><p>Reusable verification code input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;VerificationCodeInput label=&quot;VerificationCode&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;VerificationCodeInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;VerificationCode&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/VerificationCodeInput.wrn</code></p><pre data-language="wrn"><code>component VerificationCodeInput &#123;
+  props &#123;
+    label = &quot;VerificationCode&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/verified-badge.wrn b/app/pages/components/verified-badge.wrn
new file mode 100644
index 00000000..3ec9fad8
--- /dev/null
+++ b/app/pages/components/verified-badge.wrn
@@ -0,0 +1,29 @@
+page VerifiedBadgecomponent {
+  seo {
+    title = "VerifiedBadge component"
+    description = "Reusable verified badge component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">VerifiedBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>VerifiedBadge</h1><p>Reusable verified badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>3 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;VerifiedBadge label=&quot;Verified&quot; variant=&quot;default&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;VerifiedBadge&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Verified&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/VerifiedBadge.wrn</code></p><pre data-language="wrn"><code>component VerifiedBadge &#123;
+  props &#123;
+    label = &quot;Verified&quot;
+    variant = &quot;default&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;span class=&quot;wire-badge wire-badge--&#123;variant&#125; wire-catalog-badge wire-catalog-badge--verifiedbadge &#123;class&#125;&quot;&gt;&#123;label&#125;&lt;slot /&gt;&lt;/span&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/version-selector.wrn b/app/pages/components/version-selector.wrn
new file mode 100644
index 00000000..795e019c
--- /dev/null
+++ b/app/pages/components/version-selector.wrn
@@ -0,0 +1,37 @@
+page VersionSelectorcomponent {
+  seo {
+    title = "VersionSelector component"
+    description = "Reusable version selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">VersionSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>VersionSelector</h1><p>Reusable version selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;VersionSelector label=&quot;Version&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;VersionSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Version&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/VersionSelector.wrn</code></p><pre data-language="wrn"><code>component VersionSelector &#123;
+  props &#123;
+    label = &quot;Version&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/vertical-tabs.wrn b/app/pages/components/vertical-tabs.wrn
new file mode 100644
index 00000000..10b3e61d
--- /dev/null
+++ b/app/pages/components/vertical-tabs.wrn
@@ -0,0 +1,34 @@
+page VerticalTabscomponent {
+  seo {
+    title = "VerticalTabs component"
+    description = "Reusable vertical tabs component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">VerticalTabs</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>VerticalTabs</h1><p>Reusable vertical tabs component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;VerticalTabs eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;VerticalTabs&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/VerticalTabs.wrn</code></p><pre data-language="wrn"><code>component VerticalTabs &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/video-card.wrn b/app/pages/components/video-card.wrn
new file mode 100644
index 00000000..34a110e2
--- /dev/null
+++ b/app/pages/components/video-card.wrn
@@ -0,0 +1,34 @@
+page VideoCardcomponent {
+  seo {
+    title = "VideoCard component"
+    description = "Reusable video card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">VideoCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>VideoCard</h1><p>Reusable video card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;VideoCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;VideoCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/VideoCard.wrn</code></p><pre data-language="wrn"><code>component VideoCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/video-preview-dialog.wrn b/app/pages/components/video-preview-dialog.wrn
new file mode 100644
index 00000000..9ee2cb72
--- /dev/null
+++ b/app/pages/components/video-preview-dialog.wrn
@@ -0,0 +1,31 @@
+page VideoPreviewDialogcomponent {
+  seo {
+    title = "VideoPreviewDialog component"
+    description = "Reusable video preview dialog component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">VideoPreviewDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>VideoPreviewDialog</h1><p>Reusable video preview dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;VideoPreviewDialog title=&quot;title&quot; description=&quot;description&quot; open=&quot;false&quot; closeLabel=&quot;Close&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;VideoPreviewDialog&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Close&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/VideoPreviewDialog.wrn</code></p><pre data-language="wrn"><code>component VideoPreviewDialog &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    open = false
+    closeLabel = &quot;Close&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div data-show=&quot;open&quot; class=&quot;wire-overlay wire-catalog-overlay &#123;class&#125;&quot;&gt;&lt;section role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot; class=&quot;wire-dialog&quot;&gt;&lt;header&gt;&lt;h2 data-show=&quot;title&quot; class=&quot;wire-dialog__title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-dialog__description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;button type=&quot;button&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;closeLabel&#125;&lt;/button&gt;&lt;/section&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/video-upload.wrn b/app/pages/components/video-upload.wrn
new file mode 100644
index 00000000..24dfbd56
--- /dev/null
+++ b/app/pages/components/video-upload.wrn
@@ -0,0 +1,34 @@
+page VideoUploadcomponent {
+  seo {
+    title = "VideoUpload component"
+    description = "Reusable video upload component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">VideoUpload</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>VideoUpload</h1><p>Reusable video upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;VideoUpload eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;VideoUpload&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/VideoUpload.wrn</code></p><pre data-language="wrn"><code>component VideoUpload &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/virtualized-table.wrn b/app/pages/components/virtualized-table.wrn
new file mode 100644
index 00000000..6ba1184d
--- /dev/null
+++ b/app/pages/components/virtualized-table.wrn
@@ -0,0 +1,31 @@
+page VirtualizedTablecomponent {
+  seo {
+    title = "VirtualizedTable component"
+    description = "Reusable virtualized table component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">VirtualizedTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>VirtualizedTable</h1><p>Reusable virtualized table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;VirtualizedTable title=&quot;title&quot; description=&quot;description&quot; empty=&quot;false&quot; emptyText=&quot;No items available.&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;VirtualizedTable&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No items available.&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/VirtualizedTable.wrn</code></p><pre data-language="wrn"><code>component VirtualizedTable &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    empty = false
+    emptyText = &quot;No items available.&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-collection &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;title || description&quot;&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;div data-show=&quot;!empty&quot; role=&quot;list&quot; class=&quot;wire-catalog-collection__items&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;empty&quot; role=&quot;status&quot; class=&quot;wire-muted&quot;&gt;&#123;emptyText&#125;&lt;/p&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/vision-section.wrn b/app/pages/components/vision-section.wrn
new file mode 100644
index 00000000..1b5a5fec
--- /dev/null
+++ b/app/pages/components/vision-section.wrn
@@ -0,0 +1,31 @@
+page VisionSectioncomponent {
+  seo {
+    title = "VisionSection component"
+    description = "Reusable vision section component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">VisionSection</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>VisionSection</h1><p>Reusable vision section component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;VisionSection eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;VisionSection&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/VisionSection.wrn</code></p><pre data-language="wrn"><code>component VisionSection &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/visually-hidden.wrn b/app/pages/components/visually-hidden.wrn
new file mode 100644
index 00000000..57a6c8ef
--- /dev/null
+++ b/app/pages/components/visually-hidden.wrn
@@ -0,0 +1,29 @@
+page VisuallyHiddencomponent {
+  seo {
+    title = "VisuallyHidden component"
+    description = "Reusable visually hidden component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">VisuallyHidden</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>VisuallyHidden</h1><p>Reusable visually hidden component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;VisuallyHidden /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;VisuallyHidden&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>className</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/VisuallyHidden.wrn</code></p><pre data-language="wrn"><code>component VisuallyHidden &#123;
+  props &#123;
+    className = &quot;&quot;
+  &#125;
+  view &#123;
+    &lt;div class=&quot;sr-only &#123;className&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt;
+  &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/voice-script-composer.wrn b/app/pages/components/voice-script-composer.wrn
new file mode 100644
index 00000000..886c35bc
--- /dev/null
+++ b/app/pages/components/voice-script-composer.wrn
@@ -0,0 +1,34 @@
+page VoiceScriptComposercomponent {
+  seo {
+    title = "VoiceScriptComposer component"
+    description = "Reusable voice script composer component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">VoiceScriptComposer</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>VoiceScriptComposer</h1><p>Reusable voice script composer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;VoiceScriptComposer eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;VoiceScriptComposer&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/VoiceScriptComposer.wrn</code></p><pre data-language="wrn"><code>component VoiceScriptComposer &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/voice-script-editor.wrn b/app/pages/components/voice-script-editor.wrn
new file mode 100644
index 00000000..61645b24
--- /dev/null
+++ b/app/pages/components/voice-script-editor.wrn
@@ -0,0 +1,37 @@
+page VoiceScriptEditorcomponent {
+  seo {
+    title = "VoiceScriptEditor component"
+    description = "Reusable voice script editor component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">VoiceScriptEditor</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>VoiceScriptEditor</h1><p>Reusable voice script editor component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;VoiceScriptEditor label=&quot;VoiceScript&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;VoiceScriptEditor&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;VoiceScript&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/VoiceScriptEditor.wrn</code></p><pre data-language="wrn"><code>component VoiceScriptEditor &#123;
+  props &#123;
+    label = &quot;VoiceScript&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/volume-input.wrn b/app/pages/components/volume-input.wrn
new file mode 100644
index 00000000..a1b550e2
--- /dev/null
+++ b/app/pages/components/volume-input.wrn
@@ -0,0 +1,37 @@
+page VolumeInputcomponent {
+  seo {
+    title = "VolumeInput component"
+    description = "Reusable volume input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">VolumeInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>VolumeInput</h1><p>Reusable volume input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;VolumeInput label=&quot;Volume&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;VolumeInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Volume&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/VolumeInput.wrn</code></p><pre data-language="wrn"><code>component VolumeInput &#123;
+  props &#123;
+    label = &quot;Volume&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/volume-slider.wrn b/app/pages/components/volume-slider.wrn
new file mode 100644
index 00000000..72abf2d1
--- /dev/null
+++ b/app/pages/components/volume-slider.wrn
@@ -0,0 +1,34 @@
+page VolumeSlidercomponent {
+  seo {
+    title = "VolumeSlider component"
+    description = "Reusable volume slider component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">VolumeSlider</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>VolumeSlider</h1><p>Reusable volume slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;VolumeSlider eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;VolumeSlider&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/VolumeSlider.wrn</code></p><pre data-language="wrn"><code>component VolumeSlider &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/warning-card.wrn b/app/pages/components/warning-card.wrn
new file mode 100644
index 00000000..9055dcf0
--- /dev/null
+++ b/app/pages/components/warning-card.wrn
@@ -0,0 +1,30 @@
+page WarningCardcomponent {
+  seo {
+    title = "WarningCard component"
+    description = "Reusable warning card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WarningCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>WarningCard</h1><p>Reusable warning card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;WarningCard title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;WarningCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/WarningCard.wrn</code></p><pre data-language="wrn"><code>component WarningCard &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card wire-catalog-card--warning &#123;class&#125;&quot;&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-catalog-card__link&quot;&gt;&lt;span class=&quot;wire-visually-hidden&quot;&gt;Open &#123;title&#125;&lt;/span&gt;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/webhook-event-card.wrn b/app/pages/components/webhook-event-card.wrn
new file mode 100644
index 00000000..02c55e6a
--- /dev/null
+++ b/app/pages/components/webhook-event-card.wrn
@@ -0,0 +1,34 @@
+page WebhookEventCardcomponent {
+  seo {
+    title = "WebhookEventCard component"
+    description = "Reusable webhook event card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WebhookEventCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>WebhookEventCard</h1><p>Reusable webhook event card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;WebhookEventCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;WebhookEventCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/WebhookEventCard.wrn</code></p><pre data-language="wrn"><code>component WebhookEventCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/webhook-flow-diagram.wrn b/app/pages/components/webhook-flow-diagram.wrn
new file mode 100644
index 00000000..a0b7866c
--- /dev/null
+++ b/app/pages/components/webhook-flow-diagram.wrn
@@ -0,0 +1,32 @@
+page WebhookFlowDiagramcomponent {
+  seo {
+    title = "WebhookFlowDiagram component"
+    description = "Reusable webhook flow diagram component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WebhookFlowDiagram</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>WebhookFlowDiagram</h1><p>Reusable webhook flow diagram component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;WebhookFlowDiagram title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;WebhookFlowDiagram&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/WebhookFlowDiagram.wrn</code></p><pre data-language="wrn"><code>component WebhookFlowDiagram &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/webhook-payload-viewer.wrn b/app/pages/components/webhook-payload-viewer.wrn
new file mode 100644
index 00000000..e236e00e
--- /dev/null
+++ b/app/pages/components/webhook-payload-viewer.wrn
@@ -0,0 +1,34 @@
+page WebhookPayloadViewercomponent {
+  seo {
+    title = "WebhookPayloadViewer component"
+    description = "Reusable webhook payload viewer component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WebhookPayloadViewer</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>WebhookPayloadViewer</h1><p>Reusable webhook payload viewer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;WebhookPayloadViewer eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;WebhookPayloadViewer&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/WebhookPayloadViewer.wrn</code></p><pre data-language="wrn"><code>component WebhookPayloadViewer &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/webhook-url-input.wrn b/app/pages/components/webhook-url-input.wrn
new file mode 100644
index 00000000..79186e06
--- /dev/null
+++ b/app/pages/components/webhook-url-input.wrn
@@ -0,0 +1,37 @@
+page WebhookUrlInputcomponent {
+  seo {
+    title = "WebhookUrlInput component"
+    description = "Reusable webhook url input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WebhookUrlInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>WebhookUrlInput</h1><p>Reusable webhook url input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;WebhookUrlInput label=&quot;WebhookUrl&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;WebhookUrlInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;WebhookUrl&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/WebhookUrlInput.wrn</code></p><pre data-language="wrn"><code>component WebhookUrlInput &#123;
+  props &#123;
+    label = &quot;WebhookUrl&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/webinar-card.wrn b/app/pages/components/webinar-card.wrn
new file mode 100644
index 00000000..7dea125c
--- /dev/null
+++ b/app/pages/components/webinar-card.wrn
@@ -0,0 +1,34 @@
+page WebinarCardcomponent {
+  seo {
+    title = "WebinarCard component"
+    description = "Reusable webinar card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WebinarCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>WebinarCard</h1><p>Reusable webinar card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;WebinarCard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;WebinarCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/WebinarCard.wrn</code></p><pre data-language="wrn"><code>component WebinarCard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/webinar-registration-form.wrn b/app/pages/components/webinar-registration-form.wrn
new file mode 100644
index 00000000..a14adb68
--- /dev/null
+++ b/app/pages/components/webinar-registration-form.wrn
@@ -0,0 +1,34 @@
+page WebinarRegistrationFormcomponent {
+  seo {
+    title = "WebinarRegistrationForm component"
+    description = "Reusable webinar registration form component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WebinarRegistrationForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>WebinarRegistrationForm</h1><p>Reusable webinar registration form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;WebinarRegistrationForm eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;WebinarRegistrationForm&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/WebinarRegistrationForm.wrn</code></p><pre data-language="wrn"><code>component WebinarRegistrationForm &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/well.wrn b/app/pages/components/well.wrn
new file mode 100644
index 00000000..bb5f3530
--- /dev/null
+++ b/app/pages/components/well.wrn
@@ -0,0 +1,27 @@
+page Wellcomponent {
+  seo {
+    title = "Well component"
+    description = "Reusable well component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Well</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Well</h1><p>Reusable well component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Well /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Well&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Well.wrn</code></p><pre data-language="wrn"><code>component Well &#123;
+  props &#123;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-well &#123;class&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/whats-app-composer.wrn b/app/pages/components/whats-app-composer.wrn
new file mode 100644
index 00000000..66fba54b
--- /dev/null
+++ b/app/pages/components/whats-app-composer.wrn
@@ -0,0 +1,34 @@
+page WhatsAppComposercomponent {
+  seo {
+    title = "WhatsAppComposer component"
+    description = "Reusable whats app composer component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WhatsAppComposer</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>WhatsAppComposer</h1><p>Reusable whats app composer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;WhatsAppComposer eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;WhatsAppComposer&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/WhatsAppComposer.wrn</code></p><pre data-language="wrn"><code>component WhatsAppComposer &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/whats-app-number-input.wrn b/app/pages/components/whats-app-number-input.wrn
new file mode 100644
index 00000000..d407d939
--- /dev/null
+++ b/app/pages/components/whats-app-number-input.wrn
@@ -0,0 +1,37 @@
+page WhatsAppNumberInputcomponent {
+  seo {
+    title = "WhatsAppNumberInput component"
+    description = "Reusable whats app number input component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WhatsAppNumberInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>WhatsAppNumberInput</h1><p>Reusable whats app number input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;WhatsAppNumberInput label=&quot;WhatsAppNumber&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;WhatsAppNumberInput&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;WhatsAppNumber&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/WhatsAppNumberInput.wrn</code></p><pre data-language="wrn"><code>component WhatsAppNumberInput &#123;
+  props &#123;
+    label = &quot;WhatsAppNumber&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/whats-app-template-editor.wrn b/app/pages/components/whats-app-template-editor.wrn
new file mode 100644
index 00000000..c7996f34
--- /dev/null
+++ b/app/pages/components/whats-app-template-editor.wrn
@@ -0,0 +1,37 @@
+page WhatsAppTemplateEditorcomponent {
+  seo {
+    title = "WhatsAppTemplateEditor component"
+    description = "Reusable whats app template editor component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WhatsAppTemplateEditor</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>WhatsAppTemplateEditor</h1><p>Reusable whats app template editor component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;WhatsAppTemplateEditor label=&quot;WhatsAppTemplate&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;WhatsAppTemplateEditor&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;WhatsAppTemplate&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/WhatsAppTemplateEditor.wrn</code></p><pre data-language="wrn"><code>component WhatsAppTemplateEditor &#123;
+  props &#123;
+    label = &quot;WhatsAppTemplate&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/wide-container.wrn b/app/pages/components/wide-container.wrn
new file mode 100644
index 00000000..66a257d1
--- /dev/null
+++ b/app/pages/components/wide-container.wrn
@@ -0,0 +1,27 @@
+page WideContainercomponent {
+  seo {
+    title = "WideContainer component"
+    description = "Reusable wide container component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WideContainer</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>WideContainer</h1><p>Reusable wide container component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>1 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;WideContainer /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;WideContainer&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/WideContainer.wrn</code></p><pre data-language="wrn"><code>component WideContainer &#123;
+  props &#123;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;div class=&quot;wire-container wire-container--wide &#123;class&#125;&quot;&gt;&lt;slot /&gt;&lt;/div&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/wizard-header.wrn b/app/pages/components/wizard-header.wrn
new file mode 100644
index 00000000..2b7693d3
--- /dev/null
+++ b/app/pages/components/wizard-header.wrn
@@ -0,0 +1,31 @@
+page WizardHeadercomponent {
+  seo {
+    title = "WizardHeader component"
+    description = "Reusable wizard header component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WizardHeader</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>WizardHeader</h1><p>Reusable wizard header component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;WizardHeader eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;WizardHeader&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/WizardHeader.wrn</code></p><pre data-language="wrn"><code>component WizardHeader &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/wizard-navigation.wrn b/app/pages/components/wizard-navigation.wrn
new file mode 100644
index 00000000..d50e745c
--- /dev/null
+++ b/app/pages/components/wizard-navigation.wrn
@@ -0,0 +1,31 @@
+page WizardNavigationcomponent {
+  seo {
+    title = "WizardNavigation component"
+    description = "Reusable wizard navigation component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WizardNavigation</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>WizardNavigation</h1><p>Reusable wizard navigation component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;WizardNavigation eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; align=&quot;start&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;WizardNavigation&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/WizardNavigation.wrn</code></p><pre data-language="wrn"><code>component WizardNavigation &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    align = &quot;start&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;section class=&quot;wire-catalog-section wire-text--&#123;align&#125; &#123;class&#125;&quot;&gt;&lt;header data-show=&quot;eyebrow || title || description&quot;&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h2 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h2&gt;&lt;p data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;/header&gt;&lt;slot /&gt;&lt;/section&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/wizard.wrn b/app/pages/components/wizard.wrn
new file mode 100644
index 00000000..be5aab9d
--- /dev/null
+++ b/app/pages/components/wizard.wrn
@@ -0,0 +1,34 @@
+page Wizardcomponent {
+  seo {
+    title = "Wizard component"
+    description = "Reusable wizard component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Wizard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>Wizard</h1><p>Reusable wizard component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Wizard eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Wizard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Wizard.wrn</code></p><pre data-language="wrn"><code>component Wizard &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/workflow-canvas-preview.wrn b/app/pages/components/workflow-canvas-preview.wrn
new file mode 100644
index 00000000..351ab2a6
--- /dev/null
+++ b/app/pages/components/workflow-canvas-preview.wrn
@@ -0,0 +1,34 @@
+page WorkflowCanvasPreviewcomponent {
+  seo {
+    title = "WorkflowCanvasPreview component"
+    description = "Reusable workflow canvas preview component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WorkflowCanvasPreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>WorkflowCanvasPreview</h1><p>Reusable workflow canvas preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;WorkflowCanvasPreview eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;WorkflowCanvasPreview&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/WorkflowCanvasPreview.wrn</code></p><pre data-language="wrn"><code>component WorkflowCanvasPreview &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/workflow-progress.wrn b/app/pages/components/workflow-progress.wrn
new file mode 100644
index 00000000..1558aacb
--- /dev/null
+++ b/app/pages/components/workflow-progress.wrn
@@ -0,0 +1,32 @@
+page WorkflowProgresscomponent {
+  seo {
+    title = "WorkflowProgress component"
+    description = "Reusable workflow progress component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WorkflowProgress</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>WorkflowProgress</h1><p>Reusable workflow progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;WorkflowProgress title=&quot;title&quot; value=&quot;value&quot; description=&quot;description&quot; summary=&quot;summary&quot; loading=&quot;false&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;WorkflowProgress&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/WorkflowProgress.wrn</code></p><pre data-language="wrn"><code>component WorkflowProgress &#123;
+  props &#123;
+    title = &quot;&quot;
+    value = &quot;&quot;
+    description = &quot;&quot;
+    summary = &quot;&quot;
+    loading = false
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;figure aria-label=&quot;&#123;summary || title&#125;&quot; class=&quot;wire-card wire-catalog-visualization &#123;class&#125;&quot;&gt;&lt;figcaption&gt;&lt;strong data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&lt;span data-show=&quot;value&quot; class=&quot;wire-metric__value&quot;&gt;&#123;value&#125;&lt;/span&gt;&lt;span data-show=&quot;description&quot; class=&quot;wire-muted&quot;&gt;&#123;description&#125;&lt;/span&gt;&lt;/figcaption&gt;&lt;div data-show=&quot;loading&quot; class=&quot;wire-skeleton wire-catalog-visualization__skeleton&quot;&gt;&lt;/div&gt;&lt;div data-show=&quot;!loading&quot; class=&quot;wire-catalog-visualization__content&quot;&gt;&lt;slot /&gt;&lt;/div&gt;&lt;p data-show=&quot;summary&quot; class=&quot;wire-visually-hidden&quot;&gt;&#123;summary&#125;&lt;/p&gt;&lt;/figure&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/workspace-card.wrn b/app/pages/components/workspace-card.wrn
new file mode 100644
index 00000000..8838a440
--- /dev/null
+++ b/app/pages/components/workspace-card.wrn
@@ -0,0 +1,30 @@
+page WorkspaceCardcomponent {
+  seo {
+    title = "WorkspaceCard component"
+    description = "Reusable workspace card component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WorkspaceCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>WorkspaceCard</h1><p>Reusable workspace card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;WorkspaceCard title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;WorkspaceCard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/WorkspaceCard.wrn</code></p><pre data-language="wrn"><code>component WorkspaceCard &#123;
+  props &#123;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card wire-catalog-card--workspace &#123;class&#125;&quot;&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-catalog-card__link&quot;&gt;&lt;span class=&quot;wire-visually-hidden&quot;&gt;Open &#123;title&#125;&lt;/span&gt;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/workspace-selector.wrn b/app/pages/components/workspace-selector.wrn
new file mode 100644
index 00000000..e9660963
--- /dev/null
+++ b/app/pages/components/workspace-selector.wrn
@@ -0,0 +1,37 @@
+page WorkspaceSelectorcomponent {
+  seo {
+    title = "WorkspaceSelector component"
+    description = "Reusable workspace selector component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WorkspaceSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>WorkspaceSelector</h1><p>Reusable workspace selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;WorkspaceSelector label=&quot;Workspace&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;WorkspaceSelector&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Workspace&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/WorkspaceSelector.wrn</code></p><pre data-language="wrn"><code>component WorkspaceSelector &#123;
+  props &#123;
+    label = &quot;Workspace&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/workspace-switcher.wrn b/app/pages/components/workspace-switcher.wrn
new file mode 100644
index 00000000..93c6854b
--- /dev/null
+++ b/app/pages/components/workspace-switcher.wrn
@@ -0,0 +1,34 @@
+page WorkspaceSwitchercomponent {
+  seo {
+    title = "WorkspaceSwitcher component"
+    description = "Reusable workspace switcher component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WorkspaceSwitcher</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>WorkspaceSwitcher</h1><p>Reusable workspace switcher component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;WorkspaceSwitcher eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;WorkspaceSwitcher&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/WorkspaceSwitcher.wrn</code></p><pre data-language="wrn"><code>component WorkspaceSwitcher &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/year-picker.wrn b/app/pages/components/year-picker.wrn
new file mode 100644
index 00000000..e47fe4d5
--- /dev/null
+++ b/app/pages/components/year-picker.wrn
@@ -0,0 +1,37 @@
+page YearPickercomponent {
+  seo {
+    title = "YearPicker component"
+    description = "Reusable year picker component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">YearPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>YearPicker</h1><p>Reusable year picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>11 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;YearPicker label=&quot;Year&quot; name=&quot;name&quot; value=&quot;value&quot; placeholder=&quot;placeholder&quot; type=&quot;text&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;YearPicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Year&quot;</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;text&quot;</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/YearPicker.wrn</code></p><pre data-language="wrn"><code>component YearPicker &#123;
+  props &#123;
+    label = &quot;Year&quot; 
+    name = &quot;&quot;
+    value = &quot;&quot;
+    placeholder = &quot;&quot;
+    type = &quot;text&quot;
+    required = false
+    disabled = false
+    readonly = false
+    help = &quot;&quot;
+    error = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;label class=&quot;wire-field wire-catalog-field &#123;class&#125;&quot;&gt;&lt;span class=&quot;wire-label&quot;&gt;&#123;label&#125;&lt;span data-show=&quot;required&quot; class=&quot;wire-required&quot;&gt; *&lt;/span&gt;&lt;/span&gt;&lt;input name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; type=&quot;&#123;type&#125;&quot; required=&quot;&#123;required&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; class=&quot;wire-input&quot; /&gt;&lt;span data-show=&quot;help &amp;&amp; !error&quot; class=&quot;wire-field-message wire-field-message--help&quot;&gt;&#123;help&#125;&lt;/span&gt;&lt;span data-show=&quot;error&quot; role=&quot;alert&quot; class=&quot;wire-field-message wire-field-message--error&quot;&gt;&#123;error&#125;&lt;/span&gt;&lt;slot /&gt;&lt;/label&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/components/zoom-slider.wrn b/app/pages/components/zoom-slider.wrn
new file mode 100644
index 00000000..70eda1b9
--- /dev/null
+++ b/app/pages/components/zoom-slider.wrn
@@ -0,0 +1,34 @@
+page ZoomSlidercomponent {
+  seo {
+    title = "ZoomSlider component"
+    description = "Reusable zoom slider component."
+  }
+
+  view {
+    <div class="docs-shell">
+      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
+      <header class="topbar">
+        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
+      </header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ZoomSlider</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ZoomSlider</h1><p>Reusable zoom slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.64</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;ZoomSlider eyebrow=&quot;eyebrow&quot; title=&quot;title&quot; description=&quot;description&quot; href=&quot;href&quot; actionLabel=&quot;Learn more&quot; /&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ZoomSlider&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Learn more&quot;</code></td></tr><tr><td><code>image</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ZoomSlider.wrn</code></p><pre data-language="wrn"><code>component ZoomSlider &#123;
+  props &#123;
+    eyebrow = &quot;&quot;
+    title = &quot;&quot;
+    description = &quot;&quot;
+    href = &quot;&quot;
+    actionLabel = &quot;Learn more&quot;
+    image = &quot;&quot;
+    alt = &quot;&quot;
+    class = &quot;&quot;
+  &#125;
+  view &#123; &lt;article class=&quot;wire-card wire-catalog-card &#123;class&#125;&quot;&gt;&lt;img data-show=&quot;image&quot; src=&quot;&#123;image&#125;&quot; alt=&quot;&#123;alt&#125;&quot; class=&quot;wire-catalog-card__image&quot; /&gt;&lt;span data-show=&quot;eyebrow&quot; class=&quot;wire-eyebrow&quot;&gt;&#123;eyebrow&#125;&lt;/span&gt;&lt;h3 data-show=&quot;title&quot;&gt;&#123;title&#125;&lt;/h3&gt;&lt;p data-show=&quot;description&quot;&gt;&#123;description&#125;&lt;/p&gt;&lt;slot /&gt;&lt;a data-show=&quot;href&quot; href=&quot;&#123;href&#125;&quot; class=&quot;wire-btn wire-btn--ghost&quot;&gt;&#123;actionLabel&#125;&lt;/a&gt;&lt;/article&gt; &#125;
+&#125;
+</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
+      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
+      <BackToTop />
+    </div>
+  }
+}
diff --git a/app/pages/examples.wrn b/app/pages/examples.wrn
index e0d2d931..87017b58 100644
--- a/app/pages/examples.wrn
+++ b/app/pages/examples.wrn
@@ -7,8 +7,8 @@ page Examples {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Learn</span><span aria-hidden="true">/</span><span aria-current="page">Examples</span></nav><article class="documentation prose standalone"><h1>Examples</h1><p>Examples are tied to installed 0.2.64 package documentation. The focused snippets in guides are source-verified; standalone runnable projects and CI compilation are tracked as remaining work.</p><div class="coverage-list"><article><h2>Minimal .wrn page</h2><span class="status status-beta">Documented</span></article><article><h2>Database CRUD</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Authentication and protected route</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Permissions</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Forms and validation</h2><span class="status status-beta">Documented</span></article><article><h2>Realtime dashboard</h2><span class="status status-planned">Planned fixture</span></article><article><h2>File upload</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Background queue</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Redis pub/sub</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Workspace gateway</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Deployment</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Experimental mobile mode</h2><span class="status status-planned">Planned fixture</span></article></div></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/getting-started.wrn b/app/pages/getting-started.wrn
index 5311a64d..ee7871b2 100644
--- a/app/pages/getting-started.wrn
+++ b/app/pages/getting-started.wrn
@@ -7,8 +7,8 @@ page Gettingstarted {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Documentation</span><span aria-hidden="true">/</span><span aria-current="page">Getting started</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · v0.2.64</span><h1>Build a contact inbox</h1><p>This path creates a server-rendered page, validated API route, middleware, and realtime next step. It requires approved registry access and Bun 1.3.x; this site was verified with Bun 1.3.14.</p><h2 id="create">1. Create the project</h2><pre><code>bunx @wrnexus/cli@0.2.64 create my-app
 cd my-app
 bun install
diff --git a/app/pages/guides/api-routes.wrn b/app/pages/guides/api-routes.wrn
index 128a9797..c3cdd757 100644
--- a/app/pages/guides/api-routes.wrn
+++ b/app/pages/guides/api-routes.wrn
@@ -7,8 +7,8 @@ page APIroutes {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">API routes</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>API routes</h1><p>Export GET, POST, PUT, PATCH, or DELETE from app/api files. Validate request bodies, enforce authentication and authorization, cap request sizes, and return Web Responses.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/authentication.wrn b/app/pages/guides/authentication.wrn
index ed609aa0..846f94ff 100644
--- a/app/pages/guides/authentication.wrn
+++ b/app/pages/guides/authentication.wrn
@@ -7,8 +7,8 @@ page Authentication {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Authentication</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Authentication</h1><p>Configure session authentication, log users in through supported auth helpers, and read identity from context. Cookie flags, rotation, expiry, and secret storage remain deployment responsibilities.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/authorization.wrn b/app/pages/guides/authorization.wrn
index 8b7a8aae..4e932ea0 100644
--- a/app/pages/guides/authorization.wrn
+++ b/app/pages/guides/authorization.wrn
@@ -7,8 +7,8 @@ page Authorization {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Authorization</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Authorization</h1><p>Authentication identifies; authorization decides. Enforce permissions in server routes and policies, including object ownership. UI hiding is never an authorization boundary.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/configuration-and-profiles.wrn b/app/pages/guides/configuration-and-profiles.wrn
index 929b9cb4..2fc6dc99 100644
--- a/app/pages/guides/configuration-and-profiles.wrn
+++ b/app/pages/guides/configuration-and-profiles.wrn
@@ -7,8 +7,8 @@ page Configurationandprofiles {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Configuration and profiles</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Configuration and profiles</h1><p>wrnexus.config.ts owns styles, SEO, security, data, mobile, fonts, and profiles. Keep secrets in validated environment variables and review merged production configuration.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/database.wrn b/app/pages/guides/database.wrn
index fe5e4fcf..98686476 100644
--- a/app/pages/guides/database.wrn
+++ b/app/pages/guides/database.wrn
@@ -7,8 +7,8 @@ page Database {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Database</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Database</h1><p>Configure SQLite or the installed supported driver, keep queries in named SQL blocks, generate typed functions, and apply migrations before traffic. Back up data and test rollback independently.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/deployment.wrn b/app/pages/guides/deployment.wrn
index 6c6eab96..eeec4257 100644
--- a/app/pages/guides/deployment.wrn
+++ b/app/pages/guides/deployment.wrn
@@ -7,8 +7,8 @@ page Deployment {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Deployment</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Deployment</h1><p>Run bun run build, apply migrations, and start dist/server.js with Bun. Configure TLS, proxy trust, environment validation, health checks, graceful restarts, logs, backups, and restrictive security headers.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/forms-and-validation.wrn b/app/pages/guides/forms-and-validation.wrn
index f81301ac..172373f9 100644
--- a/app/pages/guides/forms-and-validation.wrn
+++ b/app/pages/guides/forms-and-validation.wrn
@@ -7,8 +7,8 @@ page Formsandvalidation {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Forms and validation</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Forms and validation</h1><p>Define a v.object schema, use data-schema on the form, show field errors with data-error, and always call parseBody on the server. refine is server-only.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/i18n-and-themes.wrn b/app/pages/guides/i18n-and-themes.wrn
index f6a21443..93e8902f 100644
--- a/app/pages/guides/i18n-and-themes.wrn
+++ b/app/pages/guides/i18n-and-themes.wrn
@@ -7,8 +7,8 @@ page Internationalizationandthemes {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Internationalization and themes</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Internationalization and themes</h1><p>Store locale JSON under app/locales and use translation directives. Themes resolve CSS tokens; ensure contrast, system preference behavior, persistence, and non-color cues.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/middleware.wrn b/app/pages/guides/middleware.wrn
index c8e8a059..42810cd1 100644
--- a/app/pages/guides/middleware.wrn
+++ b/app/pages/guides/middleware.wrn
@@ -7,8 +7,8 @@ page Middleware {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Middleware</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Middleware</h1><p>Middleware receives context and next. Return next() to continue or return a Response to stop. Put request limits and trust-boundary controls before business logic.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/mobile.wrn b/app/pages/guides/mobile.wrn
index 9e868652..d2065327 100644
--- a/app/pages/guides/mobile.wrn
+++ b/app/pages/guides/mobile.wrn
@@ -7,8 +7,8 @@ page Mobile {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Mobile</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Mobile</h1><p>Mobile capabilities are experimental in this preview. Test Capacitor permissions and lifecycle on each platform; do not assume every .wrn or browser API converts to native.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/observability.wrn b/app/pages/guides/observability.wrn
index 310227b1..4fd84f58 100644
--- a/app/pages/guides/observability.wrn
+++ b/app/pages/guides/observability.wrn
@@ -7,8 +7,8 @@ page Observability {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Observability</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Observability</h1><p>Use tracking middleware and sinks with redaction, sampling, stable request identifiers, alert ownership, and retention limits. Never capture registry tokens or session secrets.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/pages-and-components.wrn b/app/pages/guides/pages-and-components.wrn
index 1a128ed2..1d14fec8 100644
--- a/app/pages/guides/pages-and-components.wrn
+++ b/app/pages/guides/pages-and-components.wrn
@@ -7,8 +7,8 @@ page Pagesandcomponents {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Pages and components</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Pages and components</h1><p>Pages are routable, components are reusable, and layouts provide shared slots. Mount a component with data-component and keep browser state scoped and minimal.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/project-structure.wrn b/app/pages/guides/project-structure.wrn
index 7aa5f9ae..ecb9a851 100644
--- a/app/pages/guides/project-structure.wrn
+++ b/app/pages/guides/project-structure.wrn
@@ -7,8 +7,8 @@ page Projectstructure {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Project structure</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Project structure</h1><p>Pages, components, layouts, APIs, middleware, schemas, database files, locales, realtime rooms, and styles live under app. Never edit app/routes.gen.ts, .wrnexus, or dist by hand.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/pubsub.wrn b/app/pages/guides/pubsub.wrn
index a09d1edf..c1f03f9f 100644
--- a/app/pages/guides/pubsub.wrn
+++ b/app/pages/guides/pubsub.wrn
@@ -7,8 +7,8 @@ page Pubsub {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Pub/sub</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Pub/sub</h1><p>The in-process driver cannot cross processes. Use Redis where instances must share events, define channel ownership, and design for reconnects and duplicate delivery.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/queues.wrn b/app/pages/guides/queues.wrn
index 0e0ad504..c9a24ac9 100644
--- a/app/pages/guides/queues.wrn
+++ b/app/pages/guides/queues.wrn
@@ -7,8 +7,8 @@ page Queues {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Queues</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Queues</h1><p>Queue behavior is preview-level. Treat in-process work as non-durable, make handlers idempotent, cap retries, record failures, and choose a production persistence strategy.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/realtime.wrn b/app/pages/guides/realtime.wrn
index c59de7a7..d4b14ab7 100644
--- a/app/pages/guides/realtime.wrn
+++ b/app/pages/guides/realtime.wrn
@@ -7,8 +7,8 @@ page Realtime {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Realtime</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Realtime</h1><p>defineRoom handles connection and messages. Validate message shapes, authorize subscriptions, restrict origins, bound payloads, and use pub/sub to scale across processes.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/routing.wrn b/app/pages/guides/routing.wrn
index 598ae6a0..ae515c0a 100644
--- a/app/pages/guides/routing.wrn
+++ b/app/pages/guides/routing.wrn
@@ -7,8 +7,8 @@ page Routing {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Routing</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Routing</h1><p>A page filename defines its URL; index maps to the directory root and bracket segments are dynamic parameters. API files under app/api expose HTTP method functions and receive a Context.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/security.wrn b/app/pages/guides/security.wrn
index a32c42d5..bc9d1cec 100644
--- a/app/pages/guides/security.wrn
+++ b/app/pages/guides/security.wrn
@@ -7,8 +7,8 @@ page Applicationsecurity {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Application security</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Application security</h1><p>Use CSP, CSRF, Trusted Types, session hardening, validation, origin checks, upload restrictions, encryption, request limits, and explicit CORS. See the security policy for reporting.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/server-data.wrn b/app/pages/guides/server-data.wrn
index cb6fbe7d..be1e5859 100644
--- a/app/pages/guides/server-data.wrn
+++ b/app/pages/guides/server-data.wrn
@@ -7,8 +7,8 @@ page Serverdata {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Server data</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Server data</h1><p>Use an ssr API binding, return the desired response field, and render it with a server #each block. Values are escaped. Avoid fetching private data through a route that lacks authorization.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/testing.wrn b/app/pages/guides/testing.wrn
index e90dab21..922a36c7 100644
--- a/app/pages/guides/testing.wrn
+++ b/app/pages/guides/testing.wrn
@@ -7,8 +7,8 @@ page Testing {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Testing</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Testing</h1><p>Use Bun tests and @wrnexus/test helpers. Cover server HTML, API status and validation, authorization failures, reactive behavior, and a production startup smoke test.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/troubleshooting.wrn b/app/pages/guides/troubleshooting.wrn
index 7690475a..7f3e7ecc 100644
--- a/app/pages/guides/troubleshooting.wrn
+++ b/app/pages/guides/troubleshooting.wrn
@@ -7,8 +7,8 @@ page Troubleshooting {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Troubleshooting</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Troubleshooting</h1><p>Confirm Bun and package versions, regenerate docs/routes through supported commands, read the first compiler diagnostic, check file naming, validate config, and reproduce under a production build.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/upgrading.wrn b/app/pages/guides/upgrading.wrn
index e94bdcb3..a62d5a74 100644
--- a/app/pages/guides/upgrading.wrn
+++ b/app/pages/guides/upgrading.wrn
@@ -7,8 +7,8 @@ page Upgrading {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Upgrading</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Upgrading</h1><p>Back up and commit first, then use wrnexus update --latest as documented by the installed CLI. Review migrations and keep every @wrnexus package aligned. Current release: 0.2.64.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/uploads.wrn b/app/pages/guides/uploads.wrn
index db52b4c3..8ee68897 100644
--- a/app/pages/guides/uploads.wrn
+++ b/app/pages/guides/uploads.wrn
@@ -7,8 +7,8 @@ page Uploads {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Uploads</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Uploads</h1><p>Configure named stores, accepted MIME/extensions, and maxBytes. Random keys avoid path traversal. Private files require an authenticated serving route; v1 buffers each file in memory.</p><h2>Release scope</h2><p>This guide describes installed 0.2.64 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/guides/workspaces-and-gateway.wrn b/app/pages/guides/workspaces-and-gateway.wrn
index 8e6e37e0..10222440 100644
--- a/app/pages/guides/workspaces-and-gateway.wrn
+++ b/app/pages/guides/workspaces-and-gateway.wrn
@@ -7,8 +7,8 @@ page Workspacesandgateway {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Workspaces and gateway</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.2.64</span><h1>Workspaces and gateway</h1><p>A workspace runs isolated applications behind one domain-routing gateway. Add an application from the workspace root; the CLI scaffolds <code>apps/reports</code> and registers it in <code>wrnexus.workspace.ts</code>:</p><pre><code>wrnexus workspace add reports --domain=reports.localhost
 bun install
 bun run dev</code></pre><h2>Forward authentication</h2><p>Point protected applications at a dedicated verifier endpoint. The verifier must return 2xx for an authenticated session, 401/403 to deny access, or an HTTP redirect to begin browser login.</p><pre><code>// wrnexus.workspace.ts
diff --git a/app/pages/index.wrn b/app/pages/index.wrn
index be1c24c9..b11a6a1c 100644
--- a/app/pages/index.wrn
+++ b/app/pages/index.wrn
@@ -7,8 +7,8 @@ page Home {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell marketing-shell">
-      <header class="topbar marketing-header"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme">◐</button></div></header>
-      <div class="marketing-mobile-nav"><details><summary>Menu</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/examples">Examples</a></nav></details></div>
+      <header class="topbar marketing-header"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme">◐</button></div></header>
+      <div class="marketing-mobile-nav"><details><summary>Menu</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/examples">Examples</a></nav></details></div>
       <main id="main" class="marketing-main"><section class="hero marketing-hero"><Badge class="status status-beta" label="Private Developer Preview" variant="info" /><p class="eyebrow">WRNexusJS v0.2.64</p><h1>Build from the server.<br><em>Ship only what matters.</em></h1><p>WRNexusJS is an SSR-first, Bun-native full-stack framework. Build typed pages, APIs, validated forms, realtime rooms, secure sessions, workspaces, and optional mobile experiences with the <code>.wrn</code> component language.</p><div class="actions"><a class="primary" href="/access">Request preview access</a><a href="/getting-started">Read the preview docs</a></div><p class="access-note">Private developer preview. Request access to the package registry.</p><div class="code-window"><span>app/pages/dashboard.wrn</span><pre><code>page Dashboard &#123;
   ssr &#123; api tasks GET /api/tasks &#123; return tasks &#125; &#125;
   view &#123;
diff --git a/app/pages/language.wrn b/app/pages/language.wrn
index fb45a46d..f32e703e 100644
--- a/app/pages/language.wrn
+++ b/app/pages/language.wrn
@@ -7,8 +7,8 @@ page Thewrnlanguage {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Documentation</span><span aria-hidden="true">/</span><span aria-current="page">The .wrn language</span></nav><article class="documentation prose standalone"><span class="status status-beta">Language reference · 0.2.64</span><h1>The <code>.wrn</code> language</h1><nav class="local-toc" aria-label="On this page"><a href="#anatomy">Anatomy</a><a href="#state">Props and state</a><a href="#server">Server control flow</a><a href="#directives">Directives</a><a href="#security">Security</a><a href="#errors">Errors</a></nav><h2 id="anatomy">File anatomy</h2><pre><code>page Account &#123;
   layout = "public"
   seo &#123; title = "Account" description = "Manage your account." &#125;
diff --git a/app/pages/license.wrn b/app/pages/license.wrn
index 4a32085f..e2d1f3f8 100644
--- a/app/pages/license.wrn
+++ b/app/pages/license.wrn
@@ -7,8 +7,8 @@ page License {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Trust</span><span aria-hidden="true">/</span><span aria-current="page">License</span></nav><article class="documentation prose standalone"><h1>License</h1><span class="status status-planned">Owner decision required</span><p>This documentation repository contains no public license file, and the packages are unavailable from the public npm registry. No open-source license or redistribution right should be inferred.</p><p>Approved preview users must follow the private/commercial terms supplied by WorkRoot. Contact <a href="https://workroot.in/">WorkRoot</a> before copying, redistributing, or using WRNexusJS in production.</p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/packages.wrn b/app/pages/packages.wrn
index 936ca419..c6ee1e1b 100644
--- a/app/pages/packages.wrn
+++ b/app/pages/packages.wrn
@@ -11,10 +11,10 @@ page Packages {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main class="page"><section class="hero compact"><span class="eyebrow">26 focused packages</span><h1>Package reference</h1><p>Everything in the framework, organized by responsibility and documented from the published 0.2.64 APIs.</p><input class="search" type="search" placeholder="Search packages, features, or categories…" @input="query = event.target.value" /></section><section class="category-filter" aria-label="Filter packages by category"><div class="category-row"><button type="button" @click="category = 'All'">All<span>26</span></button><button type="button" @click="category = 'AI'">AI<span>1</span></button><button type="button" @click="category = 'Security'">Security<span>5</span></button><button type="button" @click="category = 'Tooling'">Tooling<span>3</span></button><button type="button" @click="category = 'Core'">Core<span>3</span></button><button type="button" @click="category = 'Frontend'">Frontend<span>5</span></button><button type="button" @click="category = 'Data'">Data<span>3</span></button><button type="button" @click="category = 'Runtime'">Runtime<span>3</span></button><button type="button" @click="category = 'Native'">Native<span>2</span></button><button type="button" @click="category = 'Realtime'">Realtime<span>1</span></button></div><p>Showing <strong>{category}</strong> packages</p></section><section class="package-grid"><a class="package-card" href="/packages/ai" data-show="(category === 'All' ? true : category === 'AI') ? (query === '' ? true : 'ai ai server-side anthropic client with generation and streaming. '.includes(query.toLowerCase())) : false">
           <span class="category">AI</span><h2>@wrnexus/ai</h2><p>Server-side Anthropic client with generation and streaming.</p><span class="card-link">Open documentation →</span>
         </a>
diff --git a/app/pages/packages/ai.wrn b/app/pages/packages/ai.wrn
index c71e17db..43a2833b 100644
--- a/app/pages/packages/ai.wrn
+++ b/app/pages/packages/ai.wrn
@@ -9,13 +9,12 @@ page wrnexusai {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">AI</span><h2>@wrnexus/ai</h2><p>Server-side Anthropic client with generation and streaming.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">AI · Preview</span><h1>@wrnexus/ai</h1><p>Server-side Anthropic client with generation and streaming.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/ai@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>A tiny, zero-dependency Claude (Anthropic) client for WRNexusJS apps — generate and stream text with Claude from any server-side code.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/ai</span></nav><section class="doc-intro"><span class="eyebrow">AI · Package reference</span><h1>@wrnexus/ai</h1><p>Server-side Anthropic client with generation and streaming.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>AI</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/ai@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>A tiny, zero-dependency Claude (Anthropic) client for WRNexusJS apps — generate and stream text with Claude from any server-side code.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/ai</code> is a thin, dependency-free wrapper over the Anthropic <strong>Messages API</strong>, built on <code>fetch</code> (Bun-native, no SDK). Use it in API routes, jobs, or middleware to call Claude. It defaults to the most capable model, <strong><code>claude-opus-4-8</code></strong>, reads your key from <code>ANTHROPIC_API_KEY</code>, and supports both one-shot generation and streaming.</p>
@@ -110,7 +109,7 @@ export const POST = async (ctx) =&gt; &#123;
 <li><strong>Zero dependencies</strong> — no <code>@anthropic-ai/sdk</code>; talks to the Messages API directly.</li>
 <li>Defaults to <code>claude-opus-4-8</code>. Pass <code>&#123; model &#125;</code> for a different model (e.g.</li>
 <p><code>&quot;claude-sonnet-5&quot;</code> for speed/cost, <code>&quot;claude-haiku-4-5&quot;</code> for the fastest).</p>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>/**
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>/**
  * @wrnexus/ai — a tiny, zero-dependency Claude (Anthropic) client for WRNexusJS apps.
  *
  * Use it in API routes, jobs, or anywhere server-side to generate text with Claude.
@@ -177,7 +176,7 @@ interface AI &#123;
 declare function createAI(config?: AIConfig): AI;
 
 export &#123; type AI, type AIConfig, AIError, type Effort, type GenerateOptions, type Message, type Role, createAI &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Return generated JSON from an API route</h3><pre data-language="ts"><code>// app/api/summarize.ts — summarize posted text
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Return generated JSON from an API route</h3><pre data-language="ts"><code>// app/api/summarize.ts — summarize posted text
 import &#123; createAI &#125; from &quot;@wrnexus/ai&quot;;
 const ai = createAI();
 
diff --git a/app/pages/packages/authz.wrn b/app/pages/packages/authz.wrn
index e1b965bf..b7937fa6 100644
--- a/app/pages/packages/authz.wrn
+++ b/app/pages/packages/authz.wrn
@@ -9,13 +9,12 @@ page wrnexusauthz {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Security</span><h2>@wrnexus/authz</h2><p>Role, permission, policy, and authorization guards.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Security · Preview</span><h1>@wrnexus/authz</h1><p>Role, permission, policy, and authorization guards.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/authz@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>Composable authorization for WRNexusJS — role-based (RBAC), policy-based (PBAC), and attribute-based (ABAC) access control that reduces to a boolean check plus an <code>authorize()</code> guard.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/authz</span></nav><section class="doc-intro"><span class="eyebrow">Security · Package reference</span><h1>@wrnexus/authz</h1><p>Role, permission, policy, and authorization guards.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Security</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/authz@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Composable authorization for WRNexusJS — role-based (RBAC), policy-based (PBAC), and attribute-based (ABAC) access control that reduces to a boolean check plus an <code>authorize()</code> guard.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/authz</code> is a small, server-side authorization toolkit. It gives you three interchangeable models — RBAC (roles → permissions), PBAC (policy predicates), and ABAC (attribute matchers) — that all collapse to a <code>boolean | Promise&lt;boolean&gt;</code> decision. Wrap any decision in a <code>Middleware</code> guard (<code>authorize</code>, <code>requireRole</code>, <code>requirePermission</code>) to protect WRNexusJS routes. Reach for it whenever a route or action needs to be gated on who the user is, what roles they hold, or attributes of the user and the resource. It plugs into <code>@wrnexus/core</code> by reading <code>ctx.user</code> as the authorization subject.</p>
@@ -123,7 +122,7 @@ app.put(
 <li><strong>Bun-only</strong> — like the rest of WRNexusJS, this package targets the Bun runtime; Node is not supported.</li>
 <li>Works with [<code>@wrnexus/core</code>](../core) — the guards return <code>Middleware</code> and read the subject from <code>ctx.user</code> on the request <code>Context</code>. Both types are imported from <code>@wrnexus/core</code>.</li>
 <li>Policy combinators (<code>any</code>, <code>all</code>) and <code>authorize</code> are async-aware, so policies may return a <code>Promise&lt;boolean&gt;</code> (e.g. for a database ownership check).</li>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>import &#123; Context, Middleware &#125; from '@wrnexus/core';
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>import &#123; Context, Middleware &#125; from '@wrnexus/core';
 
 /**
  * @wrnexus/authz — authorization: role-based (RBAC), policy-based (PBAC), and
@@ -169,7 +168,7 @@ declare function requireRole(...roles: string[]): Middleware;
 declare function requirePermission(rbac: Rbac, permission: string): Middleware;
 
 export &#123; type Policy, type Rbac, type Subject, all, any, attr, authorize, defineRbac, hasRole, requirePermission, requireRole &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>RBAC</h3><pre data-language="ts"><code>import &#123; defineRbac, hasRole &#125; from &quot;@wrnexus/authz&quot;;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>RBAC</h3><pre data-language="ts"><code>import &#123; defineRbac, hasRole &#125; from &quot;@wrnexus/authz&quot;;
 
 const rbac = defineRbac(&#123;
   admin: [&quot;*&quot;],
diff --git a/app/pages/packages/cli.wrn b/app/pages/packages/cli.wrn
index 24e74d8b..19fe6905 100644
--- a/app/pages/packages/cli.wrn
+++ b/app/pages/packages/cli.wrn
@@ -9,13 +9,12 @@ page wrnexuscli {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Tooling</span><h2>@wrnexus/cli</h2><p>Create, develop, build, generate, test, and maintain WRNexusJS apps.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Tooling · Preview</span><h1>@wrnexus/cli</h1><p>Create, develop, build, generate, test, and maintain WRNexusJS apps.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/cli@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>The <code>wrnexus</code> command-line tool that scaffolds, runs, builds, tests, and manages WRNexusJS apps.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/cli</span></nav><section class="doc-intro"><span class="eyebrow">Tooling · Package reference</span><h1>@wrnexus/cli</h1><p>Create, develop, build, generate, test, and maintain WRNexusJS apps.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Tooling</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/cli@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>The <code>wrnexus</code> command-line tool that scaffolds, runs, builds, tests, and manages WRNexusJS apps.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/cli</code> provides the <code>wrnexus</code> executable — the single entry point for developing a WRNexusJS app. It runs the HMR dev server, produces a self-contained production build, scaffolds apps/pages/components, drives database migrations, regenerates typed routes and queries, runs tests, and manages configuration profiles. It also scaffolds multi-app monorepos and serves them behind a domain-routing gateway. This is a CLI/build-time package (it shells out to the Bun binary for the dev child and tests) and it also exports the workspace config types via a subpath.</p>
@@ -138,8 +137,8 @@ export default config;</code></pre>
 <li><strong>Bun-only.</strong> The CLI runs on Bun, spawns the Bun binary for the dev child and <code>bun test</code>, and the production build uses <code>Bun.build</code>. Node is not supported.</li>
 <li>Orchestrates the rest of the framework: <code>@wrnexus/dev-server</code> (dev/prod server + gateway), <code>@wrnexus/router</code> (route + typed-routes codegen), <code>@wrnexus/compiler</code> (<code>.wrn</code> → <code>.ts</code>), <code>@wrnexus/db</code> (migrations, typed queries), <code>@wrnexus/styles</code> (config, profiles, <code>.env</code>, themes, styles), <code>@wrnexus/ui</code> (ejectable Wire UI components), <code>@wrnexus/validation</code>, <code>@wrnexus/csr</code>, and <code>@wrnexus/i18n</code>.</li>
 <li>Reads <code>wrnexus.config.ts</code> for <code>db</code> / <code>databases</code>, <code>theme</code>, <code>styles</code>, <code>seo</code>, <code>security</code>, <code>i18n</code>, and <code>profiles</code>, and <code>wrnexus.workspace.ts</code> for the gateway.</li>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>#!/usr/bin/env bun
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Create and run a single application</h3><pre data-language="bash"><code>bunx @wrnexus/cli create customer-portal
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>#!/usr/bin/env bun
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Create and run a single application</h3><pre data-language="bash"><code>bunx @wrnexus/cli create customer-portal
 cd customer-portal
 bun install
 bun run dev</code></pre></article><article class="example-card"><h3>Add routes and shared UI to an existing app</h3><pre data-language="bash"><code>wrnexus generate page reports/monthly
diff --git a/app/pages/packages/compiler.wrn b/app/pages/packages/compiler.wrn
index 4d2db103..a87e46be 100644
--- a/app/pages/packages/compiler.wrn
+++ b/app/pages/packages/compiler.wrn
@@ -9,13 +9,12 @@ page wrnexuscompiler {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Core</span><h2>@wrnexus/compiler</h2><p>Parser and code generators for the .wrn language.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Core · Preview</span><h1>@wrnexus/compiler</h1><p>Parser and code generators for the .wrn language.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/compiler@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>Compiler for the <code>.wrn</code> language — tokenizes, parses, and lowers <code>.wrn</code> page and component files to TypeScript.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/compiler</span></nav><section class="doc-intro"><span class="eyebrow">Core · Package reference</span><h1>@wrnexus/compiler</h1><p>Parser and code generators for the .wrn language.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Core</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/compiler@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Compiler for the <code>.wrn</code> language — tokenizes, parses, and lowers <code>.wrn</code> page and component files to TypeScript.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/compiler</code> turns <code>.wrn</code> source into TypeScript that targets the framework's runtime primitives. A <code>.wrn</code> file declares either a <code>page</code> (a route) or a <code>component</code> (a reusable, prop-driven fragment) with blocks for <code>state</code>, <code>view</code> (plain HTML), <code>seo</code>, <code>style</code>, <code>functions</code>, <code>api</code>, <code>ssr</code>/<code>client</code> data bindings, and <code>realtime</code> websocket handlers. The pipeline is <code>source → Lexer → parse() → PageAst → generate() → TypeScript</code>. It is a build/server-side library — the WRNexusJS dev loader calls it to compile <code>.wrn</code> files on the fly, surfacing <code>ParseError</code> as a readable error page.</p>
@@ -115,7 +114,7 @@ lx.next(); // &#123; type: &quot;lbrace&quot;, value: &quot;&#123;&quot;, pos: 1
 <ul>
 <li>Pure TypeScript with no runtime dependencies; runs under <strong>Bun</strong> as part of the WRNexusJS toolchain (Node is not supported).</li>
 <li>Generated modules target WRNexusJS runtime primitives (<code>data-scope</code>, <code>data-text</code>, <code>data-on-*</code>, <code>data-for</code>, <code>data-component</code>, <code>__wrnexus*</code>/<code>__wire*</code> helpers) — consume the output within a WRNexusJS app, e.g. via <code>@wrnexus/core</code>'s dev loader.</li>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>/**
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>/**
  * Recursive-descent parser for `.wrn`, producing a small AST.
  *
  * Grammar (subset of the vision, but real):
@@ -374,7 +373,7 @@ declare function compileWireFile(source: string, filePath?: string): string;
 declare function compile(source: string): CompileResult;
 
 export &#123; type ApiBlock, type Attr, type CompileResult, type DataApiBlock, type DataMode, LexError, Lexer, type ModeFunctionsBlock, NativeCompileError, type PageAst, ParseError, type PropDecl, type RealtimeBlock, type SeoBlock, type StateDecl, type ViewNode, compile, compileNativeWireFile, compileWireFile, eraseFunctionTypes, generate, generateNative, inferredRuntimeType, parse, runtimeTypeOf &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Compile a page</h3><pre data-language="ts"><code>import &#123; compileWireFile &#125; from &quot;@wrnexus/compiler&quot;;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Compile a page</h3><pre data-language="ts"><code>import &#123; compileWireFile &#125; from &quot;@wrnexus/compiler&quot;;
 
 const ts = compileWireFile(`
 page Home &#123;
diff --git a/app/pages/packages/core.wrn b/app/pages/packages/core.wrn
index 2a45e7fe..b8da13b3 100644
--- a/app/pages/packages/core.wrn
+++ b/app/pages/packages/core.wrn
@@ -9,13 +9,12 @@ page wrnexuscore {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Core</span><h2>@wrnexus/core</h2><p>Contexts, middleware, security, sessions, caching, JSX, and realtime.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Core · Preview</span><h1>@wrnexus/core</h1><p>Contexts, middleware, security, sessions, caching, JSX, and realtime.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/core@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>The framework core: the request <code>Context</code>, middleware contract, and the security, session, caching, streaming, realtime, and JSX primitives every other WRNexusJS package builds on.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/core</span></nav><section class="doc-intro"><span class="eyebrow">Core · Package reference</span><h1>@wrnexus/core</h1><p>Contexts, middleware, security, sessions, caching, JSX, and realtime.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Core</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/core@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>The framework core: the request <code>Context</code>, middleware contract, and the security, session, caching, streaming, realtime, and JSX primitives every other WRNexusJS package builds on.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/core</code> is the shared foundation of WRNexusJS. It defines the <code>Context</code> object that flows through every middleware, page, and API route, plus the <code>Middleware</code>/<code>Next</code> contract they implement. On top of that it ships the building blocks a real app needs: cookie-backed sessions, password auth, CSRF protection, rate limiting, request logging, HTTP + in-memory caching, file uploads, streaming/SSE responses, WebSocket &quot;rooms&quot;, security headers/CORS, and a server-side JSX runtime that renders to HTML strings. Everything here is <strong>server-side</strong> and Bun-native (it uses <code>Bun.password</code>, <code>Bun.write</code>, the web-standard <code>Request</code>/<code>Response</code>, and <code>crypto</code>). You depend on it directly and transitively through the rest of the framework.</p>
@@ -210,7 +209,7 @@ return new Response(html.toString(), &#123; headers: &#123; &quot;content-type&q
 <p>compatible with [<code>@wrnexus/pubsub</code>](../pubsub); the security, auth, and JSX primitives here are consumed by the WRNexusJS server/router packages.</p>
 <li>Subpath exports: <code>@wrnexus/core/jsx-runtime</code> and <code>@wrnexus/core/jsx-dev-runtime</code></li>
 <p>for TypeScript's automatic JSX transform.</p>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>export &#123; Fragment, Html, Component as JSXComponent, Props as JSXProps, Renderable, jsx, jsxs, mustache &#125; from './jsx-runtime.js';
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>export &#123; Fragment, Html, Component as JSXComponent, Props as JSXProps, Renderable, jsx, jsxs, mustache &#125; from './jsx-runtime.js';
 
 interface CookieOptions &#123;
     path?: string;
@@ -927,7 +926,7 @@ declare function resolveRequestUrl(req: Request, trustProxy?: boolean): URL;
 declare function withSecurityHeaders(req: Request, res: Response, mode: Mode, security?: SecurityConfig, nonce?: string): Response;
 
 export &#123; type AsyncSessionBackend, type Bucket, CSRF_COOKIE, CSRF_HEADER, type CacheControlOptions, type ContentSecurityPolicyConfig, type Context, type CookieOptions, type CookieStore, type CorsConfig, type CorsOrigin, type CspDirectiveValue, type HstsConfig, type LocalStorageSnapshot, type Middleware, type Mode, type Next, type PageComponent, type PageMeta, type PermissionsPolicyConfig, type RateLimitOptions, type RateLimitStore, type RawSocket, type RealtimeBridge, type RealtimeBus, type RealtimeConnectMeta, type RealtimeEnvelope, type RealtimeHandler, type RealtimeRegistry, type RealtimeSocket, type RequestLoggerOptions, type RequestRecord, type RequireAuthOptions, type Room, type RoomAuthInfo, type RoomClient, type RoomDefinition, type RoomHandlers, SESSION_USER_KEY, type SaveUploadOptions, type SavedUpload, type SecurityConfig, type SeoConfig, type ServerSentEvent, type SessionBackend, type SessionEntry, type SessionStore, type StreamResponseInit, type TFunction, TTLCache, type Target, type TrustedTypesConfig, UploadError, bridgeRealtime, cacheControl, collectUploads, createContext, createCorsPreflightResponse, createRealtimeRegistry, csrfProtection, csrfToken, defaultKey, defineRoom, escapeHtml, etag, getUser, hashPassword, isRoomDefinition, isSafeIslandName, isSafeRequestPath, isWebSocketOriginAllowed, loadSession, logIn, logOut, notModified, peerKey, proxyKey, rateLimit, renderDevError, renderError, renderNotFound, renderProdError, renderStatusPage, requestLogger, requireAuth, resolveRequestUrl, sanitizeFilename, saveUpload, sessionAuth, setSessionBackend, sse, streamResponse, verifyCsrf, verifyPassword, withCacheControl, withContextHeaders, withSecurityHeaders &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>A minimal middleware chain</h3><pre data-language="ts"><code>import &#123;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>A minimal middleware chain</h3><pre data-language="ts"><code>import &#123;
   createContext,
   withContextHeaders,
   sessionAuth,
diff --git a/app/pages/packages/csr.wrn b/app/pages/packages/csr.wrn
index 0036be46..9d7696b9 100644
--- a/app/pages/packages/csr.wrn
+++ b/app/pages/packages/csr.wrn
@@ -9,13 +9,12 @@ page wrnexuscsr {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Frontend</span><h2>@wrnexus/csr</h2><p>Reactive, navigation, and realtime browser runtimes.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Frontend · Preview</span><h1>@wrnexus/csr</h1><p>Reactive, navigation, and realtime browser runtimes.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/csr@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>The browser-side client runtime for WRNexusJS — generic, self-contained JS that hydrates server-rendered pages with reactivity, client-side navigation, and realtime rooms.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/csr</span></nav><section class="doc-intro"><span class="eyebrow">Frontend · Package reference</span><h1>@wrnexus/csr</h1><p>Reactive, navigation, and realtime browser runtimes.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Frontend</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/csr@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>The browser-side client runtime for WRNexusJS — generic, self-contained JS that hydrates server-rendered pages with reactivity, client-side navigation, and realtime rooms.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/csr</code> holds the three client runtimes that WRNexusJS serves to the browser. Components are authored as <code>.wrn</code> files and rendered on the <strong>server</strong>; this package provides the single, generic runtime that <strong>hydrates</strong> that HTML in the browser — there are no per-component browser bundles. Each runtime is exported as a plain-JS string (no build step, no imports) intended to be served verbatim from a well-known URL:</p>
@@ -131,7 +130,7 @@ room.send(&#123; type: &quot;chat&quot;, user: &quot;ada&quot;, text: &quot;hi&q
 <li>Browser runtimes are <strong>self-contained</strong> (no imports, no build step) and <strong>idempotent</strong>, so re-hydration after navigation or HMR is safe.</li>
 <li>Designed for a <strong>strict CSP</strong>: the reactive expression evaluator avoids <code>eval</code>/<code>new Function</code> (no <code>unsafe-eval</code>), and DOM swaps use <code>importNode</code>/attribute writes rather than <code>innerHTML</code> (Trusted-Types friendly).</li>
 <li>Peer packages: rendered <code>.wrn</code> components and the serving layer come from <code>@wrnexus/core</code> (the sole dependency); pages are rendered by the WRNexusJS dev/prod server.</li>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>/**
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>/**
  * Browser reactive runtime (Point 2: reactive directives).
  *
  * Served verbatim at `/__wrnexus/reactive.js` for any page that contains a
@@ -207,7 +206,7 @@ declare function getNavRuntime(): string;
 declare function getRealtimeRuntime(): string;
 
 export &#123; NAV_RUNTIME, REACTIVE_RUNTIME, REALTIME_RUNTIME, getNavRuntime, getReactiveRuntime, getRealtimeRuntime &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Server side — serve the runtime strings from your router (example with Bun.serve)</h3><pre data-language="ts"><code>import &#123; getReactiveRuntime, getNavRuntime, getRealtimeRuntime &#125; from &quot;@wrnexus/csr&quot;;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Server side — serve the runtime strings from your router (example with Bun.serve)</h3><pre data-language="ts"><code>import &#123; getReactiveRuntime, getNavRuntime, getRealtimeRuntime &#125; from &quot;@wrnexus/csr&quot;;
 
 const routes: Record&lt;string, string&gt; = &#123;
   &quot;/__wrnexus/reactive.js&quot;: getReactiveRuntime(),
diff --git a/app/pages/packages/db.wrn b/app/pages/packages/db.wrn
index bd81ec8d..c90ab2b5 100644
--- a/app/pages/packages/db.wrn
+++ b/app/pages/packages/db.wrn
@@ -9,13 +9,12 @@ page wrnexusdb {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Data</span><h2>@wrnexus/db</h2><p>Database adapters, typed queries, models, migrations, and sessions.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Data · Preview</span><h1>@wrnexus/db</h1><p>Database adapters, typed queries, models, migrations, and sessions.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/db@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>The database layer for WRNexusJS: TS models as the single source of truth for DDL, validation, and result typing, plus a driver-based <code>Db</code> client, migrations, and a sqlc-style query generator.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/db</span></nav><section class="doc-intro"><span class="eyebrow">Data · Package reference</span><h1>@wrnexus/db</h1><p>Database adapters, typed queries, models, migrations, and sessions.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Data</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/db@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>The database layer for WRNexusJS: TS models as the single source of truth for DDL, validation, and result typing, plus a driver-based <code>Db</code> client, migrations, and a sqlc-style query generator.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/db</code> is the server-side data layer. You describe tables as TypeScript models (the <code>v</code> column builder + <code>table()</code>); those models drive migrations, coerce raw DB rows into typed objects, and feed the query generator. A thin <code>Driver</code> interface is implemented by adapters for SQLite (<code>bun:sqlite</code>), Postgres/MySQL (<code>Bun.SQL</code>), and MongoDB. The <code>Db</code> client adds ergonomics — model-mapped <code>all</code>/<code>one</code>, transactions, <code>createTable</code>, pagination, and batched relation loading. A process-wide registry (<code>getDb</code>/<code>setDb</code>) exposes configured connections to pages and API routes. Reach for it whenever a WRNexusJS app needs persistence.</p>
@@ -150,7 +149,7 @@ const active = await repo.find(&#123; active: true &#125;);</code></pre>
 <p><code>SessionBackend</code>; <code>getDb</code>/<code>setDb</code> are wired by the WRNexusJS runtime from <code>wrnexus.config.ts</code>.</p>
 <li>The <code>mongodb</code> npm package is an optional, lazily-imported peer — install it</li>
 <p>only if you use <code>@wrnexus/db/mongo</code>. The core package stays dependency-free.</p>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>import &#123; M as Model &#125; from './schema-tVurYsbL.js';
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>import &#123; M as Model &#125; from './schema-tVurYsbL.js';
 export &#123; B as BaseType, C as Column, a as ColumnDef, b as Columns, t as table, v &#125; from './schema-tVurYsbL.js';
 import &#123; a as Db, b as Dialect, R as Row &#125; from './driver-DA53QHkO.js';
 export &#123; D as Driver, E as ExecResult, T as TxHandle, c as createDb, d as createTableSql &#125; from './driver-DA53QHkO.js';
@@ -303,7 +302,7 @@ interface RelationOptions&lt;C&gt; &#123;
 declare function loadRelated&lt;P extends Row, C extends Row = Row&gt;(db: Db, parents: P[], opts: RelationOptions&lt;C&gt;): Promise&lt;(P &amp; Record&lt;string, C | C[] | null&gt;)[]&gt;;
 
 export &#123; Db, Dialect, type Migration, Model, type ModelRef, type PageOptions, type Paginated, type QueryDef, type QueryKind, type RelationOptions, Row, appliedMigrations, closeDatabases, databaseNames, generateQueriesFile, getDb, hasDb, loadMigrations, loadRelated, migrate, paginate, parseMigration, parseQueries, registerDb, rollback, scaffoldMigration, setDb, status &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Define models, connect, create tables, and query with typed results</h3><pre data-language="ts"><code>import &#123; v, table, createDb &#125; from &quot;@wrnexus/db&quot;;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Define models, connect, create tables, and query with typed results</h3><pre data-language="ts"><code>import &#123; v, table, createDb &#125; from &quot;@wrnexus/db&quot;;
 import &#123; sqlite &#125; from &quot;@wrnexus/db/sqlite&quot;;
 
 const users = table&lt;&#123; id: number; email: string; name: string | null &#125;&gt;(&quot;users&quot;, &#123;
diff --git a/app/pages/packages/dev-server.wrn b/app/pages/packages/dev-server.wrn
index a78d2400..498ec918 100644
--- a/app/pages/packages/dev-server.wrn
+++ b/app/pages/packages/dev-server.wrn
@@ -9,13 +9,12 @@ page wrnexusdevserver {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Runtime</span><h2>@wrnexus/dev-server</h2><p>Development and production servers, HMR, assets, and gateways.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Runtime · Preview</span><h1>@wrnexus/dev-server</h1><p>Development and production servers, HMR, assets, and gateways.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/dev-server@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>The WRNexusJS HTTP + WebSocket server runtime — request dispatch, SSR document assembly, live-reload (HMR), and the portable production handler.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/dev-server</span></nav><section class="doc-intro"><span class="eyebrow">Runtime · Package reference</span><h1>@wrnexus/dev-server</h1><p>Development and production servers, HMR, assets, and gateways.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Runtime</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/dev-server@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>The WRNexusJS HTTP + WebSocket server runtime — request dispatch, SSR document assembly, live-reload (HMR), and the portable production handler.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p>This package is the server runtime that powers a WRNexusJS app in both development and production. A single <strong>request runtime</strong> (<code>createHandlers</code>) owns HTTP/WebSocket dispatch and SSR document assembly; it knows nothing about _how_ modules and assets are produced, so the dev and prod entry points wire in different backends: dev uses dynamic module loading plus on-the-fly bundling and injects a live-reload client; prod uses a static, pre-built manifest with cache-immutable assets. The package also ships a multi-app <strong>gateway</strong> (route several apps by <code>Host</code> header behind one port) and a portable <code>node:http</code> adapter for WinterCG hosts. It is entirely server-side and Bun-native (<code>Bun.serve</code>, <code>Bun.file</code>, <code>Bun.gzipSync</code>).</p>
@@ -227,7 +226,7 @@ await startGateway(&#123;
 <li>Responses are gzipped when the client accepts it and the body is a buffered, compressible payload ≥ 1 KB; streaming/SSE responses opt out via <code>Cache-Control: no-transform</code>.</li>
 <p>&lt;/content&gt;</p>
 </ul>
-<p>&lt;/invoke&gt;</p></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>import &#123; Mode, Middleware, SeoConfig, SecurityConfig, RealtimeBus, RealtimeConnectMeta &#125; from '@wrnexus/core';
+<p>&lt;/invoke&gt;</p></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>import &#123; Mode, Middleware, SeoConfig, SecurityConfig, RealtimeBus, RealtimeConnectMeta &#125; from '@wrnexus/core';
 import &#123; Router &#125; from '@wrnexus/router';
 import &#123; ResolvedTheme, MobileConfig, PwaConfig, StylesConfig, ThemeConfig &#125; from '@wrnexus/styles';
 import &#123; ResolvedI18n, I18nConfig &#125; from '@wrnexus/i18n';
@@ -655,7 +654,7 @@ interface RunningServer &#123;
 declare function startServer(opts: ServeOptions): Promise&lt;RunningServer&gt;;
 
 export &#123; type AssetServer, type FetchHandler, type GatewayApp, type GatewayAuth, type GatewayOptions, type GatewaySecurity, RESTART_EXIT_CODE, type RunningGateway, type RunningServer, type RuntimeDeps, type ServeOptions, type WsData, createHandlers, createProductionHandlers, createProductionServer, nodeListener, serveNode, startGateway, startServer, toRequest, writeResponse &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Programmatic dev server</h3><pre data-language="ts"><code>import &#123; startServer &#125; from &quot;@wrnexus/dev-server&quot;;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Programmatic dev server</h3><pre data-language="ts"><code>import &#123; startServer &#125; from &quot;@wrnexus/dev-server&quot;;
 
 const server = await startServer(&#123;
   appDir: &quot;./app&quot;,
diff --git a/app/pages/packages/encryption.wrn b/app/pages/packages/encryption.wrn
index 33c610b1..9ed37cca 100644
--- a/app/pages/packages/encryption.wrn
+++ b/app/pages/packages/encryption.wrn
@@ -9,13 +9,12 @@ page wrnexusencryption {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Security</span><h2>@wrnexus/encryption</h2><p>Hashing, HMAC, authenticated encryption, and key derivation.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Security · Preview</span><h1>@wrnexus/encryption</h1><p>Hashing, HMAC, authenticated encryption, and key derivation.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/encryption@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>Dependency-free crypto helpers for WRNexusJS: authenticated symmetric encryption (AES-256-GCM), hashing, and HMAC signing.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/encryption</span></nav><section class="doc-intro"><span class="eyebrow">Security · Package reference</span><h1>@wrnexus/encryption</h1><p>Hashing, HMAC, authenticated encryption, and key derivation.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Security</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/encryption@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Dependency-free crypto helpers for WRNexusJS: authenticated symmetric encryption (AES-256-GCM), hashing, and HMAC signing.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p>This package provides small, focused cryptographic primitives for server-side use: encrypting secrets/tokens/database fields at rest with AES-256-GCM, deriving keys from passwords via PBKDF2, computing SHA-256 digests, and signing/verifying payloads with HMAC-SHA256. It is built entirely on the standard <strong>Web Crypto API</strong> (<code>crypto.subtle</code>) plus <code>btoa</code>/<code>atob</code> and <code>TextEncoder</code>/<code>TextDecoder</code> — no third-party dependencies. Reach for it whenever you need to protect sensitive values or verify webhook signatures. All functions are <code>async</code> (Web Crypto is promise-based).</p>
@@ -61,7 +60,7 @@ if (!ok) throw new Error(&quot;Invalid webhook signature&quot;);</code></pre>
 <li><strong>No dependencies.</strong> The package has an empty dependency set; nothing is bundled beyond standard runtime APIs.</li>
 <li>Algorithms: AES-256-GCM (encryption), PBKDF2 with 100k SHA-256 iterations (key derivation), SHA-256 (digest), HMAC-SHA256 (signing).</li>
 <li>Keep generated/derived keys and HMAC secrets out of source control; treat them as first-class secrets.</li>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>/**
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>/**
  * @wrnexus/encryption — authenticated symmetric encryption (AES-256-GCM) via
  * WebCrypto, dependency-free. Use it to encrypt secrets, tokens, or database
  * fields at rest.
@@ -91,7 +90,7 @@ declare function decrypt(payload: string, key: string): Promise&lt;string&gt;;
 declare function deriveKey(password: string, salt: string): Promise&lt;string&gt;;
 
 export &#123; decrypt, deriveKey, encrypt, generateKey, hmacSign, hmacVerify, sha256 &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Symmetric encryption of a secret at rest</h3><pre data-language="ts"><code>import &#123; generateKey, encrypt, decrypt &#125; from &quot;@wrnexus/encryption&quot;;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Symmetric encryption of a secret at rest</h3><pre data-language="ts"><code>import &#123; generateKey, encrypt, decrypt &#125; from &quot;@wrnexus/encryption&quot;;
 
 const key = await generateKey(); // store this safely (env/secret manager)
 
diff --git a/app/pages/packages/helpers.wrn b/app/pages/packages/helpers.wrn
index 001b50ed..52a9c644 100644
--- a/app/pages/packages/helpers.wrn
+++ b/app/pages/packages/helpers.wrn
@@ -9,13 +9,12 @@ page wrnexushelpers {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Tooling</span><h2>@wrnexus/helpers</h2><p>Safe Context URL helpers and forward-auth login redirects.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Tooling · Preview</span><h1>@wrnexus/helpers</h1><p>Safe Context URL helpers and forward-auth login redirects.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/helpers@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><p>Safe convenience helpers for common WRNexusJS application flows. The package uses standard <code>Context</code>, <code>URL</code>, and <code>Response</code> values and has no runtime dependency beyond <code>@wrnexus/core</code>.</p>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/helpers</span></nav><section class="doc-intro"><span class="eyebrow">Tooling · Package reference</span><h1>@wrnexus/helpers</h1><p>Safe Context URL helpers and forward-auth login redirects.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Tooling</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/helpers@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><p>Safe convenience helpers for common WRNexusJS application flows. The package uses standard <code>Context</code>, <code>URL</code>, and <code>Response</code> values and has no runtime dependency beyond <code>@wrnexus/core</code>.</p>
 <pre data-language="bash"><code>bun add @wrnexus/helpers</code></pre>
 <p>The package is private, so the machine must be authenticated to the <code>wrnexus</code> npm organization.</p>
 <h3 id="usage">Usage</h3>
@@ -60,7 +59,7 @@ export const GET = async (ctx: Context) =&gt; &#123;
 <li><code>redirectToLogin(ctx, loginUrl, options): Response</code> — create a login redirect with an</li>
 <p>encoded <code>returnTo</code> parameter.</p>
 </ul>
-<p>For direct requests without gateway headers, URL helpers use <code>ctx.url</code>.</p></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>import &#123; Context &#125; from '@wrnexus/core';
+<p>For direct requests without gateway headers, URL helpers use <code>ctx.url</code>.</p></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>import &#123; Context &#125; from '@wrnexus/core';
 
 declare function appOrigin(appName: string): string;
 declare function appUrl(appName: string, path?: string): string;
@@ -110,7 +109,7 @@ declare function getOriginalRequestOrigin(ctx: RequestContext, options?: Origina
 declare function redirectToLogin(ctx: RequestContext, loginUrl: string | URL, options?: LoginRedirectOptions): Response;
 
 export &#123; type AllowedHosts, type LoginRedirectOptions, type OriginalRequestOptions, type RequestContext, appOrigin, appUrl, currentAppName, currentAppOrigin, getOriginalRequestMethod, getOriginalRequestOrigin, getOriginalRequestPath, getOriginalRequestUrl, redirectToLogin, workspaceAppOrigins &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Redirect an unauthenticated forward-auth request</h3><pre data-language="ts"><code>import type &#123; Context &#125; from &quot;@wrnexus/core&quot;;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Redirect an unauthenticated forward-auth request</h3><pre data-language="ts"><code>import type &#123; Context &#125; from &quot;@wrnexus/core&quot;;
 import &#123; redirectToLogin &#125; from &quot;@wrnexus/helpers&quot;;
 
 export const GET = async (ctx: Context) =&gt; &#123;
diff --git a/app/pages/packages/i18n.wrn b/app/pages/packages/i18n.wrn
index cd029ccf..9b9710d3 100644
--- a/app/pages/packages/i18n.wrn
+++ b/app/pages/packages/i18n.wrn
@@ -9,13 +9,12 @@ page wrnexusi18n {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Frontend</span><h2>@wrnexus/i18n</h2><p>Translation loading, locale resolution, and Intl formatting.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Frontend · Preview</span><h1>@wrnexus/i18n</h1><p>Translation loading, locale resolution, and Intl formatting.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/i18n@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>Per-request translations plus locale-aware number, date, and currency formatting for WRNexusJS apps.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/i18n</span></nav><section class="doc-intro"><span class="eyebrow">Frontend · Package reference</span><h1>@wrnexus/i18n</h1><p>Translation loading, locale resolution, and Intl formatting.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Frontend</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/i18n@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Per-request translations plus locale-aware number, date, and currency formatting for WRNexusJS apps.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/i18n</code> loads locale files from <code>app/locales/&lt;lang&gt;.json</code>, resolves the active language for each request (cookie → <code>Accept-Language</code> → default), and builds a <code>t(key, params)</code> translator used both in server code and in <code>.wrn</code> views. It also ships Intl-based formatting helpers and a tiny client runtime that wires up a language switcher. Translation lookup, language resolution, and HTML marker rewriting run server-side; only the small <code>I18N_RUNTIME</code> snippet runs in the browser.</p>
@@ -114,7 +113,7 @@ plural(2, &#123; one: &quot;# item&quot;, other: &quot;# items&quot; &#125;, lan
 <p>comes from core, and the resolved translator is exposed as <code>ctx.t</code> / <code>ctx.lang</code> in request handling.</p>
 <li>Nested message objects are supported: keys are looked up whole first, then split</li>
 <p>on <code>.</code> to walk the object tree.</p>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>import &#123; TFunction &#125; from '@wrnexus/core';
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>import &#123; TFunction &#125; from '@wrnexus/core';
 
 /**
  * Locale-aware formatting helpers (Intl-based) + pluralization. Pair with the
@@ -182,7 +181,7 @@ declare function renderI18nData(i18n: ResolvedI18n, lang: string): string;
 declare const I18N_RUNTIME: string;
 
 export &#123; I18N_JS_HREF, I18N_RUNTIME, type I18nConfig, LANG_COOKIE, type Messages, type ResolvedI18n, formatCurrency, formatDate, formatNumber, formatRelativeTime, loadLocales, makeT, plural, renderI18nData, resolveI18n, resolveLang, translateHtml &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Server: load, resolve, translate</h3><pre data-language="ts"><code>import &#123;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Server: load, resolve, translate</h3><pre data-language="ts"><code>import &#123;
   loadLocales,
   resolveI18n,
   resolveLang,
diff --git a/app/pages/packages/jwt.wrn b/app/pages/packages/jwt.wrn
index a5e05252..dcb9ca38 100644
--- a/app/pages/packages/jwt.wrn
+++ b/app/pages/packages/jwt.wrn
@@ -9,13 +9,12 @@ page wrnexusjwt {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Security</span><h2>@wrnexus/jwt</h2><p>HS256 JWT signing, verification, and bearer authentication.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Security · Preview</span><h1>@wrnexus/jwt</h1><p>HS256 JWT signing, verification, and bearer authentication.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/jwt@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>Dependency-free JSON Web Tokens (HS256) via Web Crypto, plus a bearer-token auth middleware for WRNexusJS.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/jwt</span></nav><section class="doc-intro"><span class="eyebrow">Security · Package reference</span><h1>@wrnexus/jwt</h1><p>HS256 JWT signing, verification, and bearer authentication.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Security</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/jwt@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Dependency-free JSON Web Tokens (HS256) via Web Crypto, plus a bearer-token auth middleware for WRNexusJS.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/jwt</code> signs and verifies stateless JSON Web Tokens using the <strong>HS256</strong> (HMAC-SHA-256) algorithm. It has no runtime dependencies — signing and verification are implemented directly on the standard <strong>Web Crypto</strong> API (<code>crypto.subtle</code>), which Bun provides natively. It runs server-side and pairs with the session-based auth in <code>@wrnexus/core</code>, giving you a stateless option for API and mobile clients. Reach for it when you need bearer-token auth rather than cookie sessions.</p>
@@ -88,7 +87,7 @@ app.use(jwtAuth(&#123; secret: process.env.JWT_SECRET!, required: false &#125;))
 <p>are not supported.</p>
 <li>Integrates with [<code>@wrnexus/core</code>](../core) for <code>Context</code>, <code>Middleware</code>, and</li>
 <p><code>ctx.user</code>; it complements the framework's cookie/session auth with a stateless bearer-token flow for API and mobile clients.</p>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>import &#123; Context, Middleware &#125; from '@wrnexus/core';
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>import &#123; Context, Middleware &#125; from '@wrnexus/core';
 
 /**
  * @wrnexus/jwt — dependency-free JSON Web Tokens (HS256) via WebCrypto, plus a
@@ -139,7 +138,7 @@ interface JwtAuthOptions &#123;
 declare function jwtAuth(options: JwtAuthOptions): Middleware;
 
 export &#123; type JwtAuthOptions, type JwtClaims, JwtError, type SignOptions, jwtAuth, signJwt, verifyJwt &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Typical usage</h3><pre data-language="ts"><code>import &#123; signJwt, verifyJwt, jwtAuth, JwtError &#125; from &quot;@wrnexus/jwt&quot;;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Typical usage</h3><pre data-language="ts"><code>import &#123; signJwt, verifyJwt, jwtAuth, JwtError &#125; from &quot;@wrnexus/jwt&quot;;
 
 const secret = process.env.JWT_SECRET!;
 
diff --git a/app/pages/packages/mobile.wrn b/app/pages/packages/mobile.wrn
index 07b205e3..c4f66aa2 100644
--- a/app/pages/packages/mobile.wrn
+++ b/app/pages/packages/mobile.wrn
@@ -9,13 +9,12 @@ page wrnexusmobile {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Native</span><h2>@wrnexus/mobile</h2><p>SSR-safe compatibility access to Capacitor plugins.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Native · Preview</span><h1>@wrnexus/mobile</h1><p>SSR-safe compatibility access to Capacitor plugins.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/mobile@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>SSR-safe access to Capacitor plugins from WRNexusJS browser code.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/mobile</span></nav><section class="doc-intro"><span class="eyebrow">Native · Package reference</span><h1>@wrnexus/mobile</h1><p>SSR-safe compatibility access to Capacitor plugins.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Native</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/mobile@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>SSR-safe access to Capacitor plugins from WRNexusJS browser code.</blockquote>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/mobile</code> keeps optional native imports out of server rendering while giving browser-owned modules one consistent registry for Capacitor plugins. During SSR, <code>mobile.isNative()</code> is <code>false</code> and <code>mobile.platform()</code> is <code>&quot;web&quot;</code>.</p>
 <p>Install a plugin through the WRNexusJS CLI so the web and native projects stay aligned:</p>
@@ -67,7 +66,7 @@ const status = network ? await network.getStatus() : &#123; connected: true, con
 <li>Capacitor plugin imports must remain in browser-owned modules.</li>
 <li><code>@wrnexus/mobile</code> re-exports <code>native</code> from <code>@wrnexus/native</code> for applications that</li>
 <p>prefer the higher-level cross-platform capability API.</p>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>export &#123; native &#125; from '@wrnexus/native';
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>export &#123; native &#125; from '@wrnexus/native';
 
 /** @wrnexus/mobile — SSR-safe access to Capacitor's native bridge. */
 
@@ -105,7 +104,7 @@ declare const mobile: &#123;
 &#125;;
 
 export &#123; type CapacitorBridge, type MobilePlatform, MobileUnavailableError, invoke, isNative, mobile, platform, plugin, registerPlugin, requirePlugin, whenNative &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Register and invoke a Capacitor plugin</h3><pre data-language="ts"><code>import &#123; Camera, CameraResultType &#125; from &quot;@capacitor/camera&quot;;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Register and invoke a Capacitor plugin</h3><pre data-language="ts"><code>import &#123; Camera, CameraResultType &#125; from &quot;@capacitor/camera&quot;;
 import &#123; mobile &#125; from &quot;@wrnexus/mobile&quot;;
 
 mobile.registerPlugin(&quot;Camera&quot;, Camera);
diff --git a/app/pages/packages/native.wrn b/app/pages/packages/native.wrn
index a9d8816b..6938baca 100644
--- a/app/pages/packages/native.wrn
+++ b/app/pages/packages/native.wrn
@@ -9,13 +9,12 @@ page wrnexusnative {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Native</span><h2>@wrnexus/native</h2><p>Cross-platform browser and Capacitor capability registry.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Native · Preview</span><h1>@wrnexus/native</h1><p>Cross-platform browser and Capacitor capability registry.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/native@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>Cross-platform capabilities for browsers, Capacitor WebViews, and compiled native apps.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/native</span></nav><section class="doc-intro"><span class="eyebrow">Native · Package reference</span><h1>@wrnexus/native</h1><p>Cross-platform browser and Capacitor capability registry.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Native</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/native@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Cross-platform capabilities for browsers, Capacitor WebViews, and compiled native apps.</blockquote>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/native</code> exposes capabilities by name so application code can ask what the current platform supports before presenting an action. Browser capabilities use Web APIs; mobile capabilities use installed Capacitor plugins. <code>platform()</code> returns <code>&quot;server&quot;</code> during SSR, <code>&quot;browser&quot;</code> on the web, and the Capacitor platform in a native WebView.</p>
 <pre data-language="bash"><code>bun add @wrnexus/native</code></pre>
@@ -66,7 +65,7 @@ const position = await native.run(
 </ul>
 <p>Built-ins include <code>camera</code>, <code>clipboard.write</code>, <code>share</code>, <code>geolocation</code>, <code>network</code>, <code>haptics</code>, storage, filesystem, notifications, and device information.</p>
 <h3 id="requirements-notes">Requirements / Notes</h3>
-<p>Use <code>supports()</code> before showing optional controls. Mobile capabilities require their matching Capacitor plugins to be installed and registered by the application.</p></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>import &#123; N as NativePlatform, a as NativeCapability, b as NativeRunOptions, c as NativeTarget &#125; from './types-CDShWg0i.js';
+<p>Use <code>supports()</code> before showing optional controls. Mobile capabilities require their matching Capacitor plugins to be installed and registered by the application.</p></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>import &#123; N as NativePlatform, a as NativeCapability, b as NativeRunOptions, c as NativeTarget &#125; from './types-CDShWg0i.js';
 export &#123; d as NativeAdapter, e as NativeBrowserRuntime &#125; from './types-CDShWg0i.js';
 export &#123; browserCapabilities &#125; from './browser.js';
 export &#123; mobileCapabilities &#125; from './mobile.js';
@@ -92,7 +91,7 @@ declare const native: &#123;
 &#125;;
 
 export &#123; NativeCapability, NativePlatform, NativeRunOptions, NativeTarget, NativeUnavailableError, clearRegistry, isMobile, native, platform, register, registered, run, supports &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Share a page when the platform supports it</h3><pre data-language="ts"><code>import &#123; native &#125; from &quot;@wrnexus/native&quot;;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Share a page when the platform supports it</h3><pre data-language="ts"><code>import &#123; native &#125; from &quot;@wrnexus/native&quot;;
 
 export async function shareCurrentPage() &#123;
   if (!native.supports(&quot;share&quot;)) return false;
diff --git a/app/pages/packages/oauth.wrn b/app/pages/packages/oauth.wrn
index 819d8cf0..8834ebd7 100644
--- a/app/pages/packages/oauth.wrn
+++ b/app/pages/packages/oauth.wrn
@@ -9,13 +9,12 @@ page wrnexusoauth {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Security</span><h2>@wrnexus/oauth</h2><p>OAuth 2.0, PKCE, provider presets, and profile mapping.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Security · Preview</span><h1>@wrnexus/oauth</h1><p>OAuth 2.0, PKCE, provider presets, and profile mapping.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/oauth@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>Dependency-free OAuth 2.0 sign-in for any provider, with PKCE and presets for Google, GitHub, and Discord.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/oauth</span></nav><section class="doc-intro"><span class="eyebrow">Security · Package reference</span><h1>@wrnexus/oauth</h1><p>OAuth 2.0, PKCE, provider presets, and profile mapping.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Security</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/oauth@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Dependency-free OAuth 2.0 sign-in for any provider, with PKCE and presets for Google, GitHub, and Discord.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/oauth</code> implements the OAuth 2.0 Authorization Code flow (with PKCE) for server-side sign-in. It ships ready-made provider presets and a <code>defineProvider</code> helper for custom providers, then gives you two flow functions — <code>startAuth</code> (build the redirect) and <code>completeAuth</code> (exchange the code and fetch the user's profile). It has no runtime dependencies: it uses the platform <code>fetch</code> and WebCrypto only. Pairs naturally with <code>@wrnexus/core</code>'s <code>logIn</code> to establish a session once you have a normalized profile.</p>
@@ -147,7 +146,7 @@ const gitlab = defineProvider(&#123;
 <p><code>verifier</code> between <code>startAuth</code> and <code>completeAuth</code> (session or signed cookie).</p>
 <li>Pairs with [<code>@wrnexus/core</code>](../core) — feed the normalized <code>OAuthProfile</code> into</li>
 <p><code>logIn</code> to establish a session.</p>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>/**
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>/**
  * @wrnexus/oauth — OAuth 2.0 sign-in with any provider. Ships presets for Google,
  * GitHub, and Discord, and `defineProvider` for a custom one. Dependency-free
  * (uses `fetch` + WebCrypto for PKCE). Pairs with @wrnexus/core's `logIn`.
@@ -237,7 +236,7 @@ declare function exchangeCode(provider: OAuthProvider, options: CompleteAuthOpti
 declare function fetchProfile(provider: OAuthProvider, tokens: OAuthTokens, fetchImpl?: FetchLike): Promise&lt;OAuthProfile&gt;;
 
 export &#123; type CompleteAuthOptions, type OAuthProfile, type OAuthProvider, type OAuthTokens, type ProviderCredentials, type StartAuthOptions, type StartAuthResult, completeAuth, defineProvider, discord, exchangeCode, fetchProfile, github, google, randomToken, startAuth &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Typical usage</h3><pre data-language="ts"><code>import &#123; google, startAuth, completeAuth &#125; from &quot;@wrnexus/oauth&quot;;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Typical usage</h3><pre data-language="ts"><code>import &#123; google, startAuth, completeAuth &#125; from &quot;@wrnexus/oauth&quot;;
 import &#123; logIn &#125; from &quot;@wrnexus/core&quot;;
 
 const provider = google(&#123;
diff --git a/app/pages/packages/pubsub.wrn b/app/pages/packages/pubsub.wrn
index c083caea..05019f77 100644
--- a/app/pages/packages/pubsub.wrn
+++ b/app/pages/packages/pubsub.wrn
@@ -9,13 +9,12 @@ page wrnexuspubsub {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Realtime</span><h2>@wrnexus/pubsub</h2><p>In-process and Redis-backed publish/subscribe.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Realtime · Preview</span><h1>@wrnexus/pubsub</h1><p>In-process and Redis-backed publish/subscribe.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/pubsub@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>Topic-based publish/subscribe with a pluggable driver — in-process by default, Redis for cross-process messaging.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/pubsub</span></nav><section class="doc-intro"><span class="eyebrow">Realtime · Package reference</span><h1>@wrnexus/pubsub</h1><p>In-process and Redis-backed publish/subscribe.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Realtime</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/pubsub@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Topic-based publish/subscribe with a pluggable driver — in-process by default, Redis for cross-process messaging.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/pubsub</code> is a small server-side pub/sub bus. You publish messages to a topic and subscribe with topic patterns; handlers fire for matching topics. The default driver keeps everything in-process, and you can swap in the Redis driver (<code>@wrnexus/pubsub/redis</code>) to fan messages out across processes or hosts. It also backs <code>@wrnexus/core</code>'s realtime bridge for horizontal scaling.</p>
@@ -95,7 +94,7 @@ driver.close();</code></pre>
 <li>The Redis driver reads <code>REDIS_URL</code> from the environment when no <code>url</code> is passed.</li>
 <li>Backs [<code>@wrnexus/core</code>](../core)'s realtime bridge for horizontal scaling.</li>
 <li>No external npm dependencies — the Redis client is a self-contained RESP codec.</li>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>/**
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>/**
  * @wrnexus/pubsub — topic-based publish/subscribe with a pluggable driver.
  * The default is in-process; swap in a Redis/NATS driver for cross-instance
  * messaging (it also backs @wrnexus/core's realtime bridge).
@@ -121,7 +120,7 @@ declare function memoryDriver(): PubSubDriver;
 declare function createPubSub(driver?: PubSubDriver): PubSub;
 
 export &#123; type Handler, type PubSub, type PubSubDriver, createPubSub, memoryDriver &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>In-process (default)</h3><pre data-language="ts"><code>import &#123; createPubSub &#125; from &quot;@wrnexus/pubsub&quot;;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>In-process (default)</h3><pre data-language="ts"><code>import &#123; createPubSub &#125; from &quot;@wrnexus/pubsub&quot;;
 
 const bus = createPubSub();
 
diff --git a/app/pages/packages/queue.wrn b/app/pages/packages/queue.wrn
index 53c3ce62..e8fd2fc2 100644
--- a/app/pages/packages/queue.wrn
+++ b/app/pages/packages/queue.wrn
@@ -9,13 +9,12 @@ page wrnexusqueue {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Data</span><h2>@wrnexus/queue</h2><p>Background jobs with delay, concurrency, retry, and repetition.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Data · Preview</span><h1>@wrnexus/queue</h1><p>Background jobs with delay, concurrency, retry, and repetition.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/queue@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>A background job queue with delays, retries + exponential backoff, recurring jobs, and concurrent workers.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/queue</span></nav><section class="doc-intro"><span class="eyebrow">Data · Package reference</span><h1>@wrnexus/queue</h1><p>Background jobs with delay, concurrency, retry, and repetition.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Data</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/queue@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>A background job queue with delays, retries + exponential backoff, recurring jobs, and concurrent workers.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/queue</code> is a server-side in-process job queue. You register named workers, enqueue jobs (optionally delayed or recurring), and let the queue poll and run them on a timer — with per-job retry limits and doubling backoff between attempts. The default store lives in memory; the design allows a pluggable driver to back it with Redis/SQL for durability across restarts. Reach for it when you need to defer work (emails, webhooks, cleanup) off the request path without a heavyweight external broker. Tests can drive it deterministically via <code>drain()</code>.</p>
@@ -106,7 +105,7 @@ const ran = await queue.drain(); // =&gt; 1</code></pre>
 <li>The default store is in-process, so queued jobs do not survive a restart; a</li>
 <p>pluggable driver is intended for backing it with Redis/SQL for durability.</p>
 <li>Works alongside <code>@wrnexus/core</code> for offloading work from the request path.</li>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>/**
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>/**
  * @wrnexus/queue — a background job queue with delays, retries + backoff, and
  * concurrent workers. The default store is in-process; a pluggable driver lets
  * you back it with Redis/SQL for durability across restarts.
@@ -161,7 +160,7 @@ interface Queue &#123;
 declare function createQueue(options?: QueueOptions): Queue;
 
 export &#123; type AddOptions, type Job, type JobHandler, type Queue, type QueueOptions, createQueue &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Register workers, enqueue jobs, then start the poller</h3><pre data-language="ts"><code>import &#123; createQueue &#125; from &quot;@wrnexus/queue&quot;;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Register workers, enqueue jobs, then start the poller</h3><pre data-language="ts"><code>import &#123; createQueue &#125; from &quot;@wrnexus/queue&quot;;
 
 const queue = createQueue(&#123; maxAttempts: 3, backoffMs: 1000 &#125;);
 
diff --git a/app/pages/packages/reactive.wrn b/app/pages/packages/reactive.wrn
index 322b473e..e6da851c 100644
--- a/app/pages/packages/reactive.wrn
+++ b/app/pages/packages/reactive.wrn
@@ -9,13 +9,12 @@ page wrnexusreactive {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Frontend</span><h2>@wrnexus/reactive</h2><p>Small type-safe reactive signal primitives.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Frontend · Preview</span><h1>@wrnexus/reactive</h1><p>Small type-safe reactive signal primitives.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/reactive@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>Tiny, type-safe reactive primitives (signals) with zero dependencies.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/reactive</span></nav><section class="doc-intro"><span class="eyebrow">Frontend · Package reference</span><h1>@wrnexus/reactive</h1><p>Small type-safe reactive signal primitives.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Frontend</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/reactive@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Tiny, type-safe reactive primitives (signals) with zero dependencies.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/reactive</code> is the seed of WRNexusJS's reactivity layer: a minimal <code>signal</code> primitive that holds a value, notifies subscribers when it changes, and hands back an unsubscribe function. It is deliberately small and framework-agnostic — it powers nothing on its own, but is shaped so client islands (and later the <code>.wrn</code> compiler's <code>state</code> blocks) can build reactive bindings on top of it. Reach for it when you need observable state without pulling in a full reactivity library.</p>
@@ -76,7 +75,7 @@ user.set(&#123; name: &quot;Ada&quot; &#125;);</code></pre>
 <li><strong>Zero dependencies.</strong> The only runtime API used is the standard <code>Object.is</code>.</li>
 <li>Foundational primitive for WRNexusJS client islands and the forthcoming <code>.wrn</code></li>
 <p>compiler <code>state</code> blocks.</p>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>/**
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>/**
  * A minimal, type-safe reactive signal with zero dependencies.
  *
  * This is the seed of the framework's reactivity. Today it powers nothing on
@@ -104,7 +103,7 @@ interface Signal&lt;T&gt; &#123;
 declare function signal&lt;T&gt;(initial: T): Signal&lt;T&gt;;
 
 export &#123; type Signal, type Subscriber, type Unsubscribe, signal &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Typical usage</h3><pre data-language="ts"><code>import &#123; signal &#125; from &quot;@wrnexus/reactive&quot;;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Typical usage</h3><pre data-language="ts"><code>import &#123; signal &#125; from &quot;@wrnexus/reactive&quot;;
 
 const count = signal(0);
 
diff --git a/app/pages/packages/router.wrn b/app/pages/packages/router.wrn
index 70437914..830b87ba 100644
--- a/app/pages/packages/router.wrn
+++ b/app/pages/packages/router.wrn
@@ -9,13 +9,12 @@ page wrnexusrouter {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Core</span><h2>@wrnexus/router</h2><p>Filesystem discovery, route matching, and typed route generation.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Core · Preview</span><h1>@wrnexus/router</h1><p>Filesystem discovery, route matching, and typed route generation.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/router@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>File-based router that maps an <code>app/</code> directory onto route tables and matches request paths against them.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/router</span></nav><section class="doc-intro"><span class="eyebrow">Core · Package reference</span><h1>@wrnexus/router</h1><p>Filesystem discovery, route matching, and typed route generation.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Core</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/router@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>File-based router that maps an <code>app/</code> directory onto route tables and matches request paths against them.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/router</code> scans an application's <code>app/</code> directory once at startup and builds route tables for pages, API endpoints, realtime channels, middleware, server-rendered <code>.wrn</code> components, layouts, and validation schemas. It also compiles URL patterns (<code>/users/[id]</code>) into RegExps and matches request paths against them. Request input is never turned into a file path, which makes the router immune to path traversal. This is a server-side package used by the WRNexusJS runtime to resolve incoming requests, plus a codegen helper for compile-time typed links.</p>
@@ -131,7 +130,7 @@ const m = matchRoute(routes, &quot;/posts/hello&quot;); // &#123; route, params:
 <li>Depends on [<code>@wrnexus/compiler</code>](../compiler) to <code>parse</code> <code>.wrn</code> pages and extract embedded <code>api</code> / <code>realtime</code> blocks.</li>
 <li>Depends on [<code>@wrnexus/core</code>](../core) for <code>isSafeIslandName</code> (name validation) and the <code>Middleware</code> type.</li>
 <li>Missing route directories are tolerated — a route kind you don't use simply yields an empty table.</li>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>export &#123; Middleware &#125; from '@wrnexus/core';
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>export &#123; Middleware &#125; from '@wrnexus/core';
 
 /**
  * Route compilation + matching.
@@ -220,7 +219,7 @@ interface RouterOptions &#123;
 declare function buildRouter(appDir: string, opts?: RouterOptions): Router;
 
 export &#123; type ComponentRef, type Route, type RouteMatch, type Router, type RouterOptions, buildRouter, compileRoutePattern, generateRoutesFile, matchRoute, sortRoutes &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Typical usage</h3><pre data-language="ts"><code>import &#123; buildRouter &#125; from &quot;@wrnexus/router&quot;;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Typical usage</h3><pre data-language="ts"><code>import &#123; buildRouter &#125; from &quot;@wrnexus/router&quot;;
 
 const router = buildRouter(&quot;./app&quot;, &#123;
   componentDirs: [&quot;./node_modules/@wrnexus/ui/components&quot;],
diff --git a/app/pages/packages/ssr.wrn b/app/pages/packages/ssr.wrn
index f0f59302..a8e65415 100644
--- a/app/pages/packages/ssr.wrn
+++ b/app/pages/packages/ssr.wrn
@@ -9,13 +9,12 @@ page wrnexusssr {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Runtime</span><h2>@wrnexus/ssr</h2><p>Secure HTML document rendering and SEO metadata.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Runtime · Preview</span><h1>@wrnexus/ssr</h1><p>Secure HTML document rendering and SEO metadata.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/ssr@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>Server-side rendering: wraps a page's HTML body in a complete HTML document with a metadata-driven <code>&lt;head&gt;</code>.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/ssr</span></nav><section class="doc-intro"><span class="eyebrow">Runtime · Package reference</span><h1>@wrnexus/ssr</h1><p>Secure HTML document rendering and SEO metadata.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Runtime</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/ssr@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Server-side rendering: wraps a page's HTML body in a complete HTML document with a metadata-driven <code>&lt;head&gt;</code>.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p>Pages in WRNexusJS return an HTML string for the body. <code>@wrnexus/ssr</code> takes that body and produces a full HTML document — building the <code>&lt;head&gt;</code> from page metadata and global SEO defaults, resolving canonical/Open Graph/Twitter tags, and injecting module preloads and <code>&lt;script type=&quot;module&quot;&gt;</code> tags. It is deliberately server-only: nothing in this package touches the DOM or ships to the browser, keeping server code genuinely server-only. Reach for it on the server when turning a rendered page body into a response document.</p>
@@ -96,7 +95,7 @@ return new Response(html, &#123; headers: &#123; &quot;content-type&quot;: &quot
 <li><strong>Server-only.</strong> This module never imports or touches the DOM and is safe to keep out of client bundles.</li>
 <li><strong>Depends on [<code>@wrnexus/core</code>](../core)</strong> for <code>escapeHtml</code> and the <code>PageMeta</code> / <code>SeoConfig</code> types.</li>
 <li><strong>Bun-only</strong> — like the rest of WRNexusJS, this package targets the Bun runtime (Node is not supported).</li>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>import &#123; PageMeta, SeoConfig &#125; from '@wrnexus/core';
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>import &#123; PageMeta, SeoConfig &#125; from '@wrnexus/core';
 
 /**
  * @wrnexus/ssr — server-side rendering.
@@ -139,7 +138,7 @@ interface RenderOptions &#123;
 declare function renderDocument(opts: RenderOptions): string;
 
 export &#123; type RenderOptions, renderDocument &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Render an SEO-ready application page</h3><pre data-language="ts"><code>import &#123; renderDocument &#125; from &quot;@wrnexus/ssr&quot;;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Render an SEO-ready application page</h3><pre data-language="ts"><code>import &#123; renderDocument &#125; from &quot;@wrnexus/ssr&quot;;
 
 const html = renderDocument(&#123;
   meta: &#123;
diff --git a/app/pages/packages/styles.wrn b/app/pages/packages/styles.wrn
index 84fe141f..1fb4e7f2 100644
--- a/app/pages/packages/styles.wrn
+++ b/app/pages/packages/styles.wrn
@@ -9,13 +9,12 @@ page wrnexusstyles {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Frontend</span><h2>@wrnexus/styles</h2><p>CSS pipeline, themes, fonts, profiles, and application config.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Frontend · Preview</span><h1>@wrnexus/styles</h1><p>CSS pipeline, themes, fonts, profiles, and application config.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/styles@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>Global CSS bundling, the <code>--wire-*</code> design-token theme system, and the <code>wrnexus.config.ts</code> app-config loader for WRNexusJS apps.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/styles</span></nav><section class="doc-intro"><span class="eyebrow">Frontend · Package reference</span><h1>@wrnexus/styles</h1><p>CSS pipeline, themes, fonts, profiles, and application config.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Frontend</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/styles@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Global CSS bundling, the <code>--wire-*</code> design-token theme system, and the <code>wrnexus.config.ts</code> app-config loader for WRNexusJS apps.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p>This package owns three server-side concerns that shape every page a WRNexusJS app renders:</p>
@@ -176,7 +175,7 @@ const themeJs = renderThemeRuntime(theme); // served at THEME_JS_HREF</code></pr
 <li>Config and env loading use <code>node:fs</code> / <code>node:path</code> / <code>node:url</code> and read from <code>process.env</code>.</li>
 <li>Peer package: <code>@wrnexus/core</code> supplies the <code>SeoConfig</code> and <code>SecurityConfig</code> types referenced by <code>AppConfig</code>.</li>
 <li>The bundled global stylesheet, the theme stylesheet (<code>THEME_CSS_HREF</code>), and the theme runtime (<code>THEME_JS_HREF</code>) are wired into pages by the framework's server; this package only produces their contents.</li>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>import &#123; SeoConfig, SecurityConfig &#125; from '@wrnexus/core';
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>import &#123; SeoConfig, SecurityConfig &#125; from '@wrnexus/core';
 import &#123; StorageConfig &#125; from '@wrnexus/uploader';
 
 /**
@@ -544,7 +543,7 @@ declare function bundleCss(entryPath: string, mode: Mode): Promise&lt;string&gt;
 declare function renderStyles(ctx: StyleProcessContext, styles?: StylesConfig): Promise&lt;string&gt;;
 
 export &#123; type AppConfig, type CustomThemePalette, DEFAULT_THEMES, type FontConfig, type FontDisplay, type GoogleFont, type LocalFontFace, type MobileConfig, type Mode, type PwaConfig, type ResolvedTheme, type StyleProcessContext, type StylesConfig, type Mode as StylesMode, THEME_COOKIE, THEME_CSS_HREF, THEME_JS_HREF, THEME_PALETTES, THEME_PALETTE_NAMES, type ThemeConfig, type ThemePaletteName, type ThemeTokens, bundleCss, findStyleEntry, fontCspSources, headToString, loadAppConfig, loadEnv, loadRawConfig, renderFontHead, renderProductionFontHead, renderStyles, renderThemeCss, renderThemeRuntime, resolveProfile, resolveThemeConfig, resolveThemeName &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>wrnexus.config.ts</h3><pre data-language="ts"><code>import type &#123; AppConfig &#125; from &quot;@wrnexus/styles&quot;;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>wrnexus.config.ts</h3><pre data-language="ts"><code>import type &#123; AppConfig &#125; from &quot;@wrnexus/styles&quot;;
 
 export default &#123;
   head: [
diff --git a/app/pages/packages/test.wrn b/app/pages/packages/test.wrn
index 1d758a78..91ea10ac 100644
--- a/app/pages/packages/test.wrn
+++ b/app/pages/packages/test.wrn
@@ -9,13 +9,12 @@ page wrnexustest {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Tooling</span><h2>@wrnexus/test</h2><p>WRNexusJS-aware component, route, and browser testing utilities.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Tooling · Preview</span><h1>@wrnexus/test</h1><p>WRNexusJS-aware component, route, and browser testing utilities.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/test@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>Testing utilities for WRNexusJS apps — component rendering, reactive-DOM mounting, route handler calls, and a full in-process app harness, plus a one-import re-export of <code>bun:test</code>.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/test</span></nav><section class="doc-intro"><span class="eyebrow">Tooling · Package reference</span><h1>@wrnexus/test</h1><p>WRNexusJS-aware component, route, and browser testing utilities.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Tooling</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/test@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Testing utilities for WRNexusJS apps — component rendering, reactive-DOM mounting, route handler calls, and a full in-process app harness, plus a one-import re-export of <code>bun:test</code>.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/test</code> is the server-side test toolkit you reach for when writing tests for a WRNexusJS app. It runs under <code>bun test</code> (invoked via <code>wrnexus test</code>) and gives you a single import surface: the <code>bun:test</code> primitives (<code>test</code>, <code>expect</code>, <code>mock</code>, …) re-exported alongside WRNexusJS-aware helpers that compile <code>.wrn</code> components, hydrate server HTML in a DOM, invoke API route handlers, and boot the real app on an ephemeral port for integration tests.</p>
@@ -100,7 +99,7 @@ test(&quot;health endpoint&quot;, async () =&gt; &#123;
 <p>lazily; it's a dev dependency, not a runtime dependency of this package).</p>
 <li>Works with the rest of the WRNexusJS toolchain:</li>
 <p>[<code>@wrnexus/compiler</code>](../compiler) (compiles <code>.wrn</code> sources), [<code>@wrnexus/core</code>](../core) (<code>Context</code> / <code>createContext</code>), [<code>@wrnexus/csr</code>](../csr) (reactive runtime for <code>mountHtml</code>), [<code>@wrnexus/dev-server</code>](../dev-server) (<code>startServer</code> behind <code>createHarness</code>), and [<code>@wrnexus/styles</code>](../styles) (config/env/profile loading for the harness).</p>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>import &#123; Context &#125; from '@wrnexus/core';
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>import &#123; Context &#125; from '@wrnexus/core';
 export &#123; createContext &#125; from '@wrnexus/core';
 export &#123; afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, mock, spyOn, test &#125; from 'bun:test';
 
@@ -160,7 +159,7 @@ interface HarnessOptions &#123;
 declare function createHarness(projectRoot: string, options?: HarnessOptions): Promise&lt;Harness&gt;;
 
 export &#123; type Harness, type HarnessOptions, callRoute, createHarness, mountHtml, renderComponent &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Typical usage</h3><pre data-language="ts"><code>import &#123; test, expect, renderComponent, mountHtml, createHarness &#125; from &quot;@wrnexus/test&quot;;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Typical usage</h3><pre data-language="ts"><code>import &#123; test, expect, renderComponent, mountHtml, createHarness &#125; from &quot;@wrnexus/test&quot;;
 
 test(&quot;counter renders its label&quot;, async () =&gt; &#123;
   const html = await renderComponent(SRC, &#123; start: 3, label: &quot;Hits&quot; &#125;);
diff --git a/app/pages/packages/tracking.wrn b/app/pages/packages/tracking.wrn
index 4752f284..7c311fee 100644
--- a/app/pages/packages/tracking.wrn
+++ b/app/pages/packages/tracking.wrn
@@ -9,13 +9,12 @@ page wrnexustracking {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Runtime</span><h2>@wrnexus/tracking</h2><p>Error/event capture, middleware, filtering, and sinks.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Runtime · Preview</span><h1>@wrnexus/tracking</h1><p>Error/event capture, middleware, filtering, and sinks.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/tracking@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>Error tracking for WRNexusJS apps: capture exceptions manually or via middleware and fan them out to pluggable sinks.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/tracking</span></nav><section class="doc-intro"><span class="eyebrow">Runtime · Package reference</span><h1>@wrnexus/tracking</h1><p>Error/event capture, middleware, filtering, and sinks.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Runtime</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/tracking@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>Error tracking for WRNexusJS apps: capture exceptions manually or via middleware and fan them out to pluggable sinks.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/tracking</code> is a small, server-side error-capture layer. You create a tracker with one or more <strong>sinks</strong>, then feed it errors — either manually with <code>tracker.capture(err, context)</code> or automatically by mounting <code>tracker.middleware()</code> in your request pipeline. A <code>consoleSink</code> is included; forwarding to Sentry, Datadog, or any other backend is just a matter of writing a tiny sink. Reach for it when you want a single, sink-agnostic place to route application errors. Sinks run best-effort — a throwing sink never breaks the request.</p>
@@ -91,7 +90,7 @@ tracker.addSink(anotherSink); // add more sinks later</code></pre>
 <p>used by <code>tracker.middleware()</code> come from there.</p>
 <li>Sink dispatch is fire-and-forget-safe: all sinks run via <code>Promise.all</code>, and a</li>
 <p>sink that throws is swallowed so it can never break the app.</p>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>import &#123; Middleware &#125; from '@wrnexus/core';
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>import &#123; Middleware &#125; from '@wrnexus/core';
 
 /**
  * @wrnexus/tracking — error tracking with pluggable sinks. Capture exceptions
@@ -131,7 +130,7 @@ declare const consoleSink: ErrorSink;
 declare function createTracker(options?: TrackerOptions): Tracker;
 
 export &#123; type ErrorEvent, type ErrorSink, type Tracker, type TrackerOptions, consoleSink, createTracker &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Manual capture</h3><pre data-language="ts"><code>import &#123; createTracker, consoleSink &#125; from &quot;@wrnexus/tracking&quot;;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Manual capture</h3><pre data-language="ts"><code>import &#123; createTracker, consoleSink &#125; from &quot;@wrnexus/tracking&quot;;
 
 const tracker = createTracker(&#123; sinks: [consoleSink] &#125;);
 
diff --git a/app/pages/packages/ui.wrn b/app/pages/packages/ui.wrn
index e2685748..73f1600a 100644
--- a/app/pages/packages/ui.wrn
+++ b/app/pages/packages/ui.wrn
@@ -9,13 +9,12 @@ page wrnexusui {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Frontend</span><h2>@wrnexus/ui</h2><p>Themeable server-rendered UI components and CSS.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Frontend · Preview</span><h1>@wrnexus/ui</h1><p>Themeable server-rendered UI components and CSS.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/ui@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>First-party Wire UI component library — a set of themeable <code>.wrn</code> components plus a single tokenized stylesheet.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/ui</span></nav><section class="doc-intro"><span class="eyebrow">Frontend · Package reference</span><h1>@wrnexus/ui</h1><p>Themeable server-rendered UI components and CSS.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Frontend</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/ui@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>First-party Wire UI component library — a set of themeable <code>.wrn</code> components plus a single tokenized stylesheet.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p><code>@wrnexus/ui</code> ships a library of server-rendered <code>.wrn</code> components (layout, form controls, and feedback UI) together with one themeable stylesheet, <code>ui.css</code>. The components are <strong>auto-discovered</strong> by the framework router — you don't import them in code. Once the package's component directory is on the router's scan path, you mount any component in a page with <code>data-component=&quot;&lt;name&gt;&quot;</code>. Every visual is driven by <code>var(--wire-*)</code> theme tokens, so components restyle instantly when the theme changes. The tiny JS surface (<code>src/index.ts</code>) exists only so the toolchain (CLI build + dev server) can locate the component directory and stylesheet.</p>
@@ -97,7 +96,7 @@ const router = buildRouter(appDir, &#123; componentDirs: [uiComponentsDir()] &#1
 <li>Depends on [<code>@wrnexus/core</code>](../core) (<code>dependencies</code>).</li>
 <li><code>theme-toggle</code> relies on the framework's theme runtime, which binds the</li>
 <p><code>data-wire-theme-toggle</code> attribute — no per-component JS is required.</p>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>/**
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>/**
  * @wrnexus/ui — the Wire UI component library.
  *
  * Components are `.wrn` files under `components/`, auto-discovered by the
@@ -122,15 +121,15 @@ declare function uiCss(): string;
 declare function uiComponentNames(): string[];
 
 export &#123; uiComponentNames, uiComponentsDir, uiCss, uiCssPath &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Auto-discovery</h3><pre data-language="ts"><code>import &#123; buildRouter &#125; from &quot;@wrnexus/router&quot;;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Auto-discovery</h3><pre data-language="ts"><code>import &#123; buildRouter &#125; from &quot;@wrnexus/router&quot;;
 import &#123; uiComponentsDir &#125; from &quot;@wrnexus/ui&quot;;
 
 const router = buildRouter(appDir, &#123; componentDirs: [uiComponentsDir()] &#125;);</code></pre></article><article class="example-card"><h3>Mounting components in a page</h3><pre data-language="html"><code>&lt;div data-component=&quot;card&quot;&gt;
   &lt;div data-component=&quot;badge&quot; label=&quot;New&quot;&gt;&lt;/div&gt;
   &lt;button data-component=&quot;button&quot; label=&quot;Save&quot; variant=&quot;primary&quot; size=&quot;lg&quot;&gt;&lt;/button&gt;
   &lt;div data-component=&quot;alert&quot; variant=&quot;success&quot; title=&quot;Done&quot; message=&quot;Saved.&quot;&gt;&lt;/div&gt;
-&lt;/div&gt;</code></pre></article></div></section><section id="components" class="prose ui-component-reference"><h2>All 901 UI components and props</h2><p>This reference is generated from the exact installed <code>.wrn</code> sources. Required props have no default; optional props show their default value.</p><h3>Actions</h3><div class="table-wrap"><table><thead><tr><th>Component</th><th>Props</th><th>Slots</th><th>Events</th></tr></thead><tbody><tr><td><strong>AcceptAllCookiesButton</strong><br><code>data-component=&quot;AcceptAllCookiesButton&quot;</code><br><small>Reusable accept all cookies button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ArticleNewsletterCTA</strong><br><code>data-component=&quot;ArticleNewsletterCTA&quot;</code><br><small>Reusable article newsletter c t a component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ArticleShareActions</strong><br><code>data-component=&quot;ArticleShareActions&quot;</code><br><small>Reusable article share actions component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>BackButton</strong><br><code>data-component=&quot;BackButton&quot;</code><br><small>Reusable back button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Button</strong><br><code>data-component=&quot;Button&quot;</code><br><small>Reusable button component.</small></td><td><code>label: string = &quot;Button&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>size: string = &quot;md&quot;</code><br><code>disabled: boolean = false</code><br><code>loading: boolean = false</code><br><code>icon: string = &quot;&quot;</code><br><code>className: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>CenteredCTA</strong><br><code>data-component=&quot;CenteredCTA&quot;</code><br><small>Reusable centered c t a component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ClearFiltersButton</strong><br><code>data-component=&quot;ClearFiltersButton&quot;</code><br><small>Reusable clear filters button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CloseButton</strong><br><code>data-component=&quot;CloseButton&quot;</code><br><small>Reusable close button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CodeCopyButton</strong><br><code>data-component=&quot;CodeCopyButton&quot;</code><br><small>Reusable code copy button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ContactCTA</strong><br><code>data-component=&quot;ContactCTA&quot;</code><br><small>Reusable contact c t a component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ContactSalesButton</strong><br><code>data-component=&quot;ContactSalesButton&quot;</code><br><small>Reusable contact sales button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CopyButton</strong><br><code>data-component=&quot;CopyButton&quot;</code><br><small>Reusable copy button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CopyCodeButton</strong><br><code>data-component=&quot;CopyCodeButton&quot;</code><br><small>Reusable copy code button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DangerButton</strong><br><code>data-component=&quot;DangerButton&quot;</code><br><small>Reusable danger button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DeveloperCTA</strong><br><code>data-component=&quot;DeveloperCTA&quot;</code><br><small>Reusable developer c t a component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DoNotSellLink</strong><br><code>data-component=&quot;DoNotSellLink&quot;</code><br><small>Reusable do not sell link component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DownloadAction</strong><br><code>data-component=&quot;DownloadAction&quot;</code><br><small>Reusable download action component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DownloadButton</strong><br><code>data-component=&quot;DownloadButton&quot;</code><br><small>Reusable download button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DownloadPolicyButton</strong><br><code>data-component=&quot;DownloadPolicyButton&quot;</code><br><small>Reusable download policy button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>EnterpriseCTA</strong><br><code>data-component=&quot;EnterpriseCTA&quot;</code><br><small>Reusable enterprise c t a component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ErrorActions</strong><br><code>data-component=&quot;ErrorActions&quot;</code><br><small>Reusable error actions component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ErrorSupportLink</strong><br><code>data-component=&quot;ErrorSupportLink&quot;</code><br><small>Reusable error support link component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ExternalLink</strong><br><code>data-component=&quot;ExternalLink&quot;</code><br><small>Reusable external link component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FieldActions</strong><br><code>data-component=&quot;FieldActions&quot;</code><br><small>Reusable field actions component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FinalCTA</strong><br><code>data-component=&quot;FinalCTA&quot;</code><br><small>Reusable final c t a component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FormActions</strong><br><code>data-component=&quot;FormActions&quot;</code><br><small>Reusable form actions component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>GhostButton</strong><br><code>data-component=&quot;GhostButton&quot;</code><br><small>Reusable ghost button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>GradientCTA</strong><br><code>data-component=&quot;GradientCTA&quot;</code><br><small>Reusable gradient c t a component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>HeaderActions</strong><br><code>data-component=&quot;HeaderActions&quot;</code><br><small>Reusable header actions component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>HeroActions</strong><br><code>data-component=&quot;HeroActions&quot;</code><br><small>Reusable hero actions component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>HeroPrimaryAction</strong><br><code>data-component=&quot;HeroPrimaryAction&quot;</code><br><small>Reusable hero primary action component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>HeroSecondaryAction</strong><br><code>data-component=&quot;HeroSecondaryAction&quot;</code><br><small>Reusable hero secondary action component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>IconButton</strong><br><code>data-component=&quot;IconButton&quot;</code><br><small>Reusable icon button component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>label: string = &quot;Action&quot;</code><br><code>icon: string = &quot;•&quot;</code><br><code>variant: string = &quot;ghost&quot;</code><br><code>disabled: boolean = false</code></td><td>None</td><td>None</td></tr><tr><td><strong>LegalPrintButton</strong><br><code>data-component=&quot;LegalPrintButton&quot;</code><br><small>Reusable legal print button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LinkButton</strong><br><code>data-component=&quot;LinkButton&quot;</code><br><small>Reusable link button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LoadingButton</strong><br><code>data-component=&quot;LoadingButton&quot;</code><br><small>Reusable loading button component.</small></td><td><code>label: string = &quot;Continue&quot;</code><br><code>loadingLabel: string = &quot;Loading…&quot;</code><br><code>loading: boolean = false</code><br><code>disabled: boolean = false</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>LocalizedRouteLink</strong><br><code>data-component=&quot;LocalizedRouteLink&quot;</code><br><small>Reusable localized route link component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MobileMenuButton</strong><br><code>data-component=&quot;MobileMenuButton&quot;</code><br><small>Reusable mobile menu button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>NewsletterCTA</strong><br><code>data-component=&quot;NewsletterCTA&quot;</code><br><small>Reusable newsletter c t a component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>OpenAPICTA</strong><br><code>data-component=&quot;OpenAPICTA&quot;</code><br><small>Reusable open a p i c t a component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PasskeyButton</strong><br><code>data-component=&quot;PasskeyButton&quot;</code><br><small>Reusable passkey button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PlanCTA</strong><br><code>data-component=&quot;PlanCTA&quot;</code><br><small>Reusable plan c t a component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PostmanCTA</strong><br><code>data-component=&quot;PostmanCTA&quot;</code><br><small>Reusable postman c t a component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PrimaryButton</strong><br><code>data-component=&quot;PrimaryButton&quot;</code><br><small>Reusable primary button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PrintAction</strong><br><code>data-component=&quot;PrintAction&quot;</code><br><small>Reusable print action component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PrintPolicyButton</strong><br><code>data-component=&quot;PrintPolicyButton&quot;</code><br><small>Reusable print policy button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProductCTA</strong><br><code>data-component=&quot;ProductCTA&quot;</code><br><small>Reusable product c t a component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RejectOptionalCookiesButton</strong><br><code>data-component=&quot;RejectOptionalCookiesButton&quot;</code><br><small>Reusable reject optional cookies button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ReopenCookieSettingsButton</strong><br><code>data-component=&quot;ReopenCookieSettingsButton&quot;</code><br><small>Reusable reopen cookie settings button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ResponsibleDisclosureCTA</strong><br><code>data-component=&quot;ResponsibleDisclosureCTA&quot;</code><br><small>Reusable responsible disclosure c t a component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SaveCookiePreferencesButton</strong><br><code>data-component=&quot;SaveCookiePreferencesButton&quot;</code><br><small>Reusable save cookie preferences button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SearchButton</strong><br><code>data-component=&quot;SearchButton&quot;</code><br><small>Reusable search button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SecondaryButton</strong><br><code>data-component=&quot;SecondaryButton&quot;</code><br><small>Reusable secondary button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SectionActions</strong><br><code>data-component=&quot;SectionActions&quot;</code><br><small>Reusable section actions component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ShareAction</strong><br><code>data-component=&quot;ShareAction&quot;</code><br><small>Reusable share action component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ShareButton</strong><br><code>data-component=&quot;ShareButton&quot;</code><br><small>Reusable share button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SignInLink</strong><br><code>data-component=&quot;SignInLink&quot;</code><br><small>Reusable sign in link component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SkipLink</strong><br><code>data-component=&quot;SkipLink&quot;</code><br><small>Reusable skip link component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SplitButton</strong><br><code>data-component=&quot;SplitButton&quot;</code><br><small>Reusable split button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SplitCTA</strong><br><code>data-component=&quot;SplitCTA&quot;</code><br><small>Reusable split c t a component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>StartFreeButton</strong><br><code>data-component=&quot;StartFreeButton&quot;</code><br><small>Reusable start free button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TertiaryButton</strong><br><code>data-component=&quot;TertiaryButton&quot;</code><br><small>Reusable tertiary button component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TextLink</strong><br><code>data-component=&quot;TextLink&quot;</code><br><small>Reusable text link component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ToastAction</strong><br><code>data-component=&quot;ToastAction&quot;</code><br><small>Reusable toast action component.</small></td><td><code>label: string = &quot;Action&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>type: string = &quot;button&quot;</code><br><code>variant: string = &quot;primary&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr></tbody></table></div><h3>Content</h3><div class="table-wrap"><table><thead><tr><th>Component</th><th>Props</th><th>Slots</th><th>Events</th></tr></thead><tbody><tr><td><strong>AccessibleAccordion</strong><br><code>data-component=&quot;AccessibleAccordion&quot;</code><br><small>Reusable accessible accordion component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AccessibleCarousel</strong><br><code>data-component=&quot;AccessibleCarousel&quot;</code><br><small>Reusable accessible carousel component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AccessibleChartSummary</strong><br><code>data-component=&quot;AccessibleChartSummary&quot;</code><br><small>Reusable accessible chart summary component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AccessibleErrorSummary</strong><br><code>data-component=&quot;AccessibleErrorSummary&quot;</code><br><small>Reusable accessible error summary component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AccessibleIcon</strong><br><code>data-component=&quot;AccessibleIcon&quot;</code><br><small>Reusable accessible icon component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AccessibleTabs</strong><br><code>data-component=&quot;AccessibleTabs&quot;</code><br><small>Reusable accessible tabs component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AccessibleTooltip</strong><br><code>data-component=&quot;AccessibleTooltip&quot;</code><br><small>Reusable accessible tooltip component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Accordion</strong><br><code>data-component=&quot;Accordion&quot;</code><br><small>Reusable accordion component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>title: string = &quot;Question&quot;</code><br><code>open: boolean = false</code></td><td><code>default</code></td><td><code>click</code></td></tr><tr><td><strong>AddOnCard</strong><br><code>data-component=&quot;AddOnCard&quot;</code><br><small>Reusable add on card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AddressPreview</strong><br><code>data-component=&quot;AddressPreview&quot;</code><br><small>Reusable address preview component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AdvancedFilterBuilder</strong><br><code>data-component=&quot;AdvancedFilterBuilder&quot;</code><br><small>Reusable advanced filter builder component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AnalyticsDashboardPreview</strong><br><code>data-component=&quot;AnalyticsDashboardPreview&quot;</code><br><small>Reusable analytics dashboard preview component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ApiEndpointCard</strong><br><code>data-component=&quot;ApiEndpointCard&quot;</code><br><small>Reusable api endpoint card component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>method: string = &quot;GET&quot;</code><br><code>path: string = &quot;/api/example&quot;</code><br><code>description: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ApiErrorExample</strong><br><code>data-component=&quot;ApiErrorExample&quot;</code><br><small>Reusable api error example component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ApiKeyDisplay</strong><br><code>data-component=&quot;ApiKeyDisplay&quot;</code><br><small>Reusable api key display component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ApiRequestExample</strong><br><code>data-component=&quot;ApiRequestExample&quot;</code><br><small>Reusable api request example component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ApiResponseExample</strong><br><code>data-component=&quot;ApiResponseExample&quot;</code><br><small>Reusable api response example component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ApiSchemaViewer</strong><br><code>data-component=&quot;ApiSchemaViewer&quot;</code><br><small>Reusable api schema viewer component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AssetCard</strong><br><code>data-component=&quot;AssetCard&quot;</code><br><small>Reusable asset card component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AttachmentUpload</strong><br><code>data-component=&quot;AttachmentUpload&quot;</code><br><small>Reusable attachment upload component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AudioUpload</strong><br><code>data-component=&quot;AudioUpload&quot;</code><br><small>Reusable audio upload component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AuditLogPreview</strong><br><code>data-component=&quot;AuditLogPreview&quot;</code><br><small>Reusable audit log preview component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AuthorAvatar</strong><br><code>data-component=&quot;AuthorAvatar&quot;</code><br><small>Reusable author avatar component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AuthorCard</strong><br><code>data-component=&quot;AuthorCard&quot;</code><br><small>Reusable author card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AuthorizedApplicationCard</strong><br><code>data-component=&quot;AuthorizedApplicationCard&quot;</code><br><small>Reusable authorized application card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AutomationExampleCard</strong><br><code>data-component=&quot;AutomationExampleCard&quot;</code><br><small>Reusable automation example card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AvailabilityCalendar</strong><br><code>data-component=&quot;AvailabilityCalendar&quot;</code><br><small>Reusable availability calendar component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Avatar</strong><br><code>data-component=&quot;Avatar&quot;</code><br><small>Reusable avatar component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>src: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>initials: string = &quot;WR&quot;</code><br><code>size: string = &quot;md&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>AvatarUpload</strong><br><code>data-component=&quot;AvatarUpload&quot;</code><br><small>Reusable avatar upload component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>BankTransferDetails</strong><br><code>data-component=&quot;BankTransferDetails&quot;</code><br><small>Reusable bank transfer details component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>BillingAddressForm</strong><br><code>data-component=&quot;BillingAddressForm&quot;</code><br><small>Reusable billing address form component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>BillingExample</strong><br><code>data-component=&quot;BillingExample&quot;</code><br><small>Reusable billing example component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>BlogCard</strong><br><code>data-component=&quot;BlogCard&quot;</code><br><small>Reusable blog card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>BlogSearch</strong><br><code>data-component=&quot;BlogSearch&quot;</code><br><small>Reusable blog search component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>BodyText</strong><br><code>data-component=&quot;BodyText&quot;</code><br><small>Reusable body text component.</small></td><td><code>text: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>BudgetRangeSlider</strong><br><code>data-component=&quot;BudgetRangeSlider&quot;</code><br><small>Reusable budget range slider component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Calendar</strong><br><code>data-component=&quot;Calendar&quot;</code><br><small>Reusable calendar component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CampaignCard</strong><br><code>data-component=&quot;CampaignCard&quot;</code><br><small>Reusable campaign card component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CampaignPerformancePreview</strong><br><code>data-component=&quot;CampaignPerformancePreview&quot;</code><br><small>Reusable campaign performance preview component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Card</strong><br><code>data-component=&quot;Card&quot;</code><br><small>Reusable card component.</small></td><td><code>variant: string = &quot;default&quot;</code><br><code>padding: string = &quot;md&quot;</code><br><code>interactive: boolean = false</code><br><code>className: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CardPaymentForm</strong><br><code>data-component=&quot;CardPaymentForm&quot;</code><br><small>Reusable card payment form component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CareerApplicationForm</strong><br><code>data-component=&quot;CareerApplicationForm&quot;</code><br><small>Reusable career application form component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Carousel</strong><br><code>data-component=&quot;Carousel&quot;</code><br><small>Reusable carousel component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CaseStudyCard</strong><br><code>data-component=&quot;CaseStudyCard&quot;</code><br><small>Reusable case study card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CaseStudyPreview</strong><br><code>data-component=&quot;CaseStudyPreview&quot;</code><br><small>Reusable case study preview component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CertificateUpload</strong><br><code>data-component=&quot;CertificateUpload&quot;</code><br><small>Reusable certificate upload component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ChannelCard</strong><br><code>data-component=&quot;ChannelCard&quot;</code><br><small>Reusable channel card component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ChannelIcon</strong><br><code>data-component=&quot;ChannelIcon&quot;</code><br><small>Reusable channel icon component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ChartTooltip</strong><br><code>data-component=&quot;ChartTooltip&quot;</code><br><small>Reusable chart tooltip component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Checklist</strong><br><code>data-component=&quot;Checklist&quot;</code><br><small>Reusable checklist component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ClickableCard</strong><br><code>data-component=&quot;ClickableCard&quot;</code><br><small>Reusable clickable card component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Code</strong><br><code>data-component=&quot;Code&quot;</code><br><small>Reusable code component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CodeBlock</strong><br><code>data-component=&quot;CodeBlock&quot;</code><br><small>Reusable code block component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>language: string = &quot;text&quot;</code><br><code>filename: string = &quot;&quot;</code><br><code>code: string = &quot;&quot;</code></td><td>None</td><td><code>click</code></td></tr><tr><td><strong>CodeTabs</strong><br><code>data-component=&quot;CodeTabs&quot;</code><br><small>Reusable code tabs component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CodeText</strong><br><code>data-component=&quot;CodeText&quot;</code><br><small>Reusable code text component.</small></td><td><code>text: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ColorSwatch</strong><br><code>data-component=&quot;ColorSwatch&quot;</code><br><small>Reusable color swatch component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CommandBlock</strong><br><code>data-component=&quot;CommandBlock&quot;</code><br><small>Reusable command block component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ComplianceProgramCard</strong><br><code>data-component=&quot;ComplianceProgramCard&quot;</code><br><small>Reusable compliance program card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ConnectedAccountCard</strong><br><code>data-component=&quot;ConnectedAccountCard&quot;</code><br><small>Reusable connected account card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ConnectionCard</strong><br><code>data-component=&quot;ConnectionCard&quot;</code><br><small>Reusable connection card component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ConsentTimelinePreview</strong><br><code>data-component=&quot;ConsentTimelinePreview&quot;</code><br><small>Reusable consent timeline preview component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ContactCard</strong><br><code>data-component=&quot;ContactCard&quot;</code><br><small>Reusable contact card component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ContactForm</strong><br><code>data-component=&quot;ContactForm&quot;</code><br><small>Reusable contact form component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ContactSalesForm</strong><br><code>data-component=&quot;ContactSalesForm&quot;</code><br><small>Reusable contact sales form component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ContextSwitcher</strong><br><code>data-component=&quot;ContextSwitcher&quot;</code><br><small>Reusable context switcher component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ConversationPreview</strong><br><code>data-component=&quot;ConversationPreview&quot;</code><br><small>Reusable conversation preview component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CostSummary</strong><br><code>data-component=&quot;CostSummary&quot;</code><br><small>Reusable cost summary component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CronBuilder</strong><br><code>data-component=&quot;CronBuilder&quot;</code><br><small>Reusable cron builder component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CsvUpload</strong><br><code>data-component=&quot;CsvUpload&quot;</code><br><small>Reusable csv upload component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CustomerLogo</strong><br><code>data-component=&quot;CustomerLogo&quot;</code><br><small>Reusable customer logo component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CustomerStoryCard</strong><br><code>data-component=&quot;CustomerStoryCard&quot;</code><br><small>Reusable customer story card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DataProtectionCard</strong><br><code>data-component=&quot;DataProtectionCard&quot;</code><br><small>Reusable data protection card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DateRangeCalendar</strong><br><code>data-component=&quot;DateRangeCalendar&quot;</code><br><small>Reusable date range calendar component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DateRangeSlider</strong><br><code>data-component=&quot;DateRangeSlider&quot;</code><br><small>Reusable date range slider component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DeliveryPreview</strong><br><code>data-component=&quot;DeliveryPreview&quot;</code><br><small>Reusable delivery preview component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DemoRequestForm</strong><br><code>data-component=&quot;DemoRequestForm&quot;</code><br><small>Reusable demo request form component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DeveloperSearch</strong><br><code>data-component=&quot;DeveloperSearch&quot;</code><br><small>Reusable developer search component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DeviceCard</strong><br><code>data-component=&quot;DeviceCard&quot;</code><br><small>Reusable device card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DocumentPreview</strong><br><code>data-component=&quot;DocumentPreview&quot;</code><br><small>Reusable document preview component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DocumentUpload</strong><br><code>data-component=&quot;DocumentUpload&quot;</code><br><small>Reusable document upload component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DownloadGateForm</strong><br><code>data-component=&quot;DownloadGateForm&quot;</code><br><small>Reusable download gate form component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DownloadResourceForm</strong><br><code>data-component=&quot;DownloadResourceForm&quot;</code><br><small>Reusable download resource form component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DurationSlider</strong><br><code>data-component=&quot;DurationSlider&quot;</code><br><small>Reusable duration slider component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ElevatedCard</strong><br><code>data-component=&quot;ElevatedCard&quot;</code><br><small>Reusable elevated card component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>EmailComposer</strong><br><code>data-component=&quot;EmailComposer&quot;</code><br><small>Reusable email composer component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>EnterprisePricingCard</strong><br><code>data-component=&quot;EnterprisePricingCard&quot;</code><br><small>Reusable enterprise pricing card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>EnvironmentSwitcher</strong><br><code>data-component=&quot;EnvironmentSwitcher&quot;</code><br><small>Reusable environment switcher component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ErrorCard</strong><br><code>data-component=&quot;ErrorCard&quot;</code><br><small>Reusable error card component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ErrorCode</strong><br><code>data-component=&quot;ErrorCode&quot;</code><br><small>Reusable error code component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ErrorIllustration</strong><br><code>data-component=&quot;ErrorIllustration&quot;</code><br><small>Reusable error illustration component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ErrorPage</strong><br><code>data-component=&quot;ErrorPage&quot;</code><br><small>Reusable error page component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>EstimatedCostSummary</strong><br><code>data-component=&quot;EstimatedCostSummary&quot;</code><br><small>Reusable estimated cost summary component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ExpandableText</strong><br><code>data-component=&quot;ExpandableText&quot;</code><br><small>Reusable expandable text component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>EyebrowText</strong><br><code>data-component=&quot;EyebrowText&quot;</code><br><small>Reusable eyebrow text component.</small></td><td><code>text: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FactorCard</strong><br><code>data-component=&quot;FactorCard&quot;</code><br><small>Reusable factor card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FallbackRouteBuilder</strong><br><code>data-component=&quot;FallbackRouteBuilder&quot;</code><br><small>Reusable fallback route builder component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FaviconUpload</strong><br><code>data-component=&quot;FaviconUpload&quot;</code><br><small>Reusable favicon upload component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FeatureCard</strong><br><code>data-component=&quot;FeatureCard&quot;</code><br><small>Reusable feature card component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>icon: string = &quot;✦&quot;</code><br><code>title: string = &quot;Feature&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>FeatureChecklist</strong><br><code>data-component=&quot;FeatureChecklist&quot;</code><br><small>Reusable feature checklist component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FeaturedBlogCard</strong><br><code>data-component=&quot;FeaturedBlogCard&quot;</code><br><small>Reusable featured blog card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FeatureIconCard</strong><br><code>data-component=&quot;FeatureIconCard&quot;</code><br><small>Reusable feature icon card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FeatureTabs</strong><br><code>data-component=&quot;FeatureTabs&quot;</code><br><small>Reusable feature tabs component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FileSizeLabel</strong><br><code>data-component=&quot;FileSizeLabel&quot;</code><br><small>Reusable file size label component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FileUpload</strong><br><code>data-component=&quot;FileUpload&quot;</code><br><small>Reusable file upload component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>id: string = &quot;file&quot;</code><br><code>name: string = &quot;file&quot;</code><br><code>label: string = &quot;Upload file&quot;</code><br><code>accept: string = &quot;&quot;</code><br><code>multiple: boolean = false</code><br><code>help: string = &quot;Drag and drop or browse&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>FooterLanguageSwitcher</strong><br><code>data-component=&quot;FooterLanguageSwitcher&quot;</code><br><small>Reusable footer language switcher component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ForbiddenPage</strong><br><code>data-component=&quot;ForbiddenPage&quot;</code><br><small>Reusable forbidden page component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ForgotPasswordForm</strong><br><code>data-component=&quot;ForgotPasswordForm&quot;</code><br><small>Reusable forgot password form component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Form</strong><br><code>data-component=&quot;Form&quot;</code><br><small>Reusable form component.</small></td><td><code>action: string = &quot;&quot;</code><br><code>method: string = &quot;post&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FormErrorSummary</strong><br><code>data-component=&quot;FormErrorSummary&quot;</code><br><small>Reusable form error summary component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>title: string = &quot;Please fix the following&quot;</code><br><code>visible: boolean = true</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FormHelpText</strong><br><code>data-component=&quot;FormHelpText&quot;</code><br><small>Reusable form help text component.</small></td><td><code>id: string = &quot;&quot;</code><br><code>text: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FormLabel</strong><br><code>data-component=&quot;FormLabel&quot;</code><br><small>Reusable form label component.</small></td><td><code>for: string = &quot;&quot;</code><br><code>label: string = &quot;Label&quot;</code><br><code>required: boolean = false</code><br><code>optional: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>GlassCard</strong><br><code>data-component=&quot;GlassCard&quot;</code><br><small>Reusable glass card component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>GlobalSearch</strong><br><code>data-component=&quot;GlobalSearch&quot;</code><br><small>Reusable global search component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>GuideCard</strong><br><code>data-component=&quot;GuideCard&quot;</code><br><small>Reusable guide card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>GuideChecklist</strong><br><code>data-component=&quot;GuideChecklist&quot;</code><br><small>Reusable guide checklist component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>GuideStep</strong><br><code>data-component=&quot;GuideStep&quot;</code><br><small>Reusable guide step component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>HeroGradientText</strong><br><code>data-component=&quot;HeroGradientText&quot;</code><br><small>Reusable hero gradient text component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>HeroProductPreview</strong><br><code>data-component=&quot;HeroProductPreview&quot;</code><br><small>Reusable hero product preview component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>HeroTrustText</strong><br><code>data-component=&quot;HeroTrustText&quot;</code><br><small>Reusable hero trust text component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>HighlightText</strong><br><code>data-component=&quot;HighlightText&quot;</code><br><small>Reusable highlight text component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>HolidayCalendar</strong><br><code>data-component=&quot;HolidayCalendar&quot;</code><br><small>Reusable holiday calendar component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>HumanApprovalStep</strong><br><code>data-component=&quot;HumanApprovalStep&quot;</code><br><small>Reusable human approval step component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Icon</strong><br><code>data-component=&quot;Icon&quot;</code><br><small>Reusable icon component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Illustration</strong><br><code>data-component=&quot;Illustration&quot;</code><br><small>Reusable illustration component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ImageCompressionPreview</strong><br><code>data-component=&quot;ImageCompressionPreview&quot;</code><br><small>Reusable image compression preview component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ImageUpload</strong><br><code>data-component=&quot;ImageUpload&quot;</code><br><small>Reusable image upload component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>IncidentCard</strong><br><code>data-component=&quot;IncidentCard&quot;</code><br><small>Reusable incident card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>InfoCard</strong><br><code>data-component=&quot;InfoCard&quot;</code><br><small>Reusable info card component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>InlineCode</strong><br><code>data-component=&quot;InlineCode&quot;</code><br><small>Reusable inline code component.</small></td><td><code>text: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>IntegrationCard</strong><br><code>data-component=&quot;IntegrationCard&quot;</code><br><small>Reusable integration card component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>InvoiceLineItem</strong><br><code>data-component=&quot;InvoiceLineItem&quot;</code><br><small>Reusable invoice line item component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>InvoiceSummary</strong><br><code>data-component=&quot;InvoiceSummary&quot;</code><br><small>Reusable invoice summary component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>JobCard</strong><br><code>data-component=&quot;JobCard&quot;</code><br><small>Reusable job card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>JsonViewer</strong><br><code>data-component=&quot;JsonViewer&quot;</code><br><small>Reusable json viewer component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>KycDocumentUpload</strong><br><code>data-component=&quot;KycDocumentUpload&quot;</code><br><small>Reusable kyc document upload component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LanguageSwitcher</strong><br><code>data-component=&quot;LanguageSwitcher&quot;</code><br><small>Reusable language switcher component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LeadText</strong><br><code>data-component=&quot;LeadText&quot;</code><br><small>Reusable lead text component.</small></td><td><code>text: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LegalContactBlock</strong><br><code>data-component=&quot;LegalContactBlock&quot;</code><br><small>Reusable legal contact block component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LegalSummary</strong><br><code>data-component=&quot;LegalSummary&quot;</code><br><small>Reusable legal summary component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Logo</strong><br><code>data-component=&quot;Logo&quot;</code><br><small>Reusable logo component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LogoUpload</strong><br><code>data-component=&quot;LogoUpload&quot;</code><br><small>Reusable logo upload component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MaintenanceCard</strong><br><code>data-component=&quot;MaintenanceCard&quot;</code><br><small>Reusable maintenance card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MaintenancePage</strong><br><code>data-component=&quot;MaintenancePage&quot;</code><br><small>Reusable maintenance page component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MessageComposer</strong><br><code>data-component=&quot;MessageComposer&quot;</code><br><small>Reusable message composer component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MessageComposerPreview</strong><br><code>data-component=&quot;MessageComposerPreview&quot;</code><br><small>Reusable message composer preview component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MessagePreview</strong><br><code>data-component=&quot;MessagePreview&quot;</code><br><small>Reusable message preview component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MessageVolumeSlider</strong><br><code>data-component=&quot;MessageVolumeSlider&quot;</code><br><small>Reusable message volume slider component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MetricCard</strong><br><code>data-component=&quot;MetricCard&quot;</code><br><small>Reusable metric card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MetricText</strong><br><code>data-component=&quot;MetricText&quot;</code><br><small>Reusable metric text component.</small></td><td><code>text: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MobileTableCard</strong><br><code>data-component=&quot;MobileTableCard&quot;</code><br><small>Reusable mobile table card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MultiFileUpload</strong><br><code>data-component=&quot;MultiFileUpload&quot;</code><br><small>Reusable multi file upload component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MutedText</strong><br><code>data-component=&quot;MutedText&quot;</code><br><small>Reusable muted text component.</small></td><td><code>text: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>NavigationItem</strong><br><code>data-component=&quot;NavigationItem&quot;</code><br><small>Reusable navigation item component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>NewsletterForm</strong><br><code>data-component=&quot;NewsletterForm&quot;</code><br><small>Reusable newsletter form component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;Stay up to date&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>placeholder: string = &quot;Enter your email&quot;</code><br><code>buttonLabel: string = &quot;Subscribe&quot;</code><br><code>action: string = &quot;/newsletter/subscribe&quot;</code><br><code>method: string = &quot;post&quot;</code><br><code>emailName: string = &quot;email&quot;</code><br><code>privacyLabel: string = &quot;&quot;</code><br><code>privacyHref: string = &quot;/privacy&quot;</code><br><code>successMessage: string = &quot;You are subscribed.&quot;</code><br><code>errorMessage: string = &quot;Something went wrong. Please try again.&quot;</code><br><code>iconClass: string = &quot;icon-[lucide--mail]&quot;</code><br><code>centered: boolean = false</code><br><code>compact: boolean = false</code><br><code>showIcon: boolean = true</code><br><code>showPrivacy: boolean = true</code><br><code>fullWidth: boolean = false</code></td><td>None</td><td><code>submit</code><br><code>input</code></td></tr><tr><td><strong>NotFoundPage</strong><br><code>data-component=&quot;NotFoundPage&quot;</code><br><small>Reusable not found page component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>NotificationCard</strong><br><code>data-component=&quot;NotificationCard&quot;</code><br><small>Reusable notification card component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>OfficeCard</strong><br><code>data-component=&quot;OfficeCard&quot;</code><br><small>Reusable office card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>OfflinePage</strong><br><code>data-component=&quot;OfflinePage&quot;</code><br><small>Reusable offline page component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>OneTimeSecretDisplay</strong><br><code>data-component=&quot;OneTimeSecretDisplay&quot;</code><br><small>Reusable one time secret display component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>OpacitySlider</strong><br><code>data-component=&quot;OpacitySlider&quot;</code><br><small>Reusable opacity slider component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>OtpVerificationForm</strong><br><code>data-component=&quot;OtpVerificationForm&quot;</code><br><small>Reusable otp verification form component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>OutlinedCard</strong><br><code>data-component=&quot;OutlinedCard&quot;</code><br><small>Reusable outlined card component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PartnerApplicationForm</strong><br><code>data-component=&quot;PartnerApplicationForm&quot;</code><br><small>Reusable partner application form component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PartnerProgramCard</strong><br><code>data-component=&quot;PartnerProgramCard&quot;</code><br><small>Reusable partner program card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PaymentMethodCard</strong><br><code>data-component=&quot;PaymentMethodCard&quot;</code><br><small>Reusable payment method card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PdfPreview</strong><br><code>data-component=&quot;PdfPreview&quot;</code><br><small>Reusable pdf preview component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PlatformPillarCard</strong><br><code>data-component=&quot;PlatformPillarCard&quot;</code><br><small>Reusable platform pillar card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PressReleaseCard</strong><br><code>data-component=&quot;PressReleaseCard&quot;</code><br><small>Reusable press release card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PriceRangeSlider</strong><br><code>data-component=&quot;PriceRangeSlider&quot;</code><br><small>Reusable price range slider component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PriceText</strong><br><code>data-component=&quot;PriceText&quot;</code><br><small>Reusable price text component.</small></td><td><code>text: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PricingCard</strong><br><code>data-component=&quot;PricingCard&quot;</code><br><small>Reusable pricing card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PricingContactForm</strong><br><code>data-component=&quot;PricingContactForm&quot;</code><br><small>Reusable pricing contact form component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PricingPlanCard</strong><br><code>data-component=&quot;PricingPlanCard&quot;</code><br><small>Reusable pricing plan card component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>name: string = &quot;Starter&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>price: string = &quot;₹0&quot;</code><br><code>period: string = &quot;/month&quot;</code><br><code>featured: boolean = false</code><br><code>ctaLabel: string = &quot;Choose plan&quot;</code><br><code>ctaHref: string = &quot;#&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProductCard</strong><br><code>data-component=&quot;ProductCard&quot;</code><br><small>Reusable product card component.</small></td><td><code>eyebrow: string = &quot;Product&quot;</code><br><code>title: string = &quot;Product name&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;#&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>status: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>ProductIcon</strong><br><code>data-component=&quot;ProductIcon&quot;</code><br><small>Reusable product icon component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProductLogo</strong><br><code>data-component=&quot;ProductLogo&quot;</code><br><small>Reusable product logo component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProductMiniCard</strong><br><code>data-component=&quot;ProductMiniCard&quot;</code><br><small>Reusable product mini card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProductNavigationCard</strong><br><code>data-component=&quot;ProductNavigationCard&quot;</code><br><small>Reusable product navigation card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProgressSlider</strong><br><code>data-component=&quot;ProgressSlider&quot;</code><br><small>Reusable progress slider component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProjectCard</strong><br><code>data-component=&quot;ProjectCard&quot;</code><br><small>Reusable project card component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProjectSwitcher</strong><br><code>data-component=&quot;ProjectSwitcher&quot;</code><br><small>Reusable project switcher component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PublicHeaderLogo</strong><br><code>data-component=&quot;PublicHeaderLogo&quot;</code><br><small>Reusable public header logo component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PushComposer</strong><br><code>data-component=&quot;PushComposer&quot;</code><br><small>Reusable push composer component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>QrCode</strong><br><code>data-component=&quot;QrCode&quot;</code><br><small>Reusable qr code component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>QuantityStepper</strong><br><code>data-component=&quot;QuantityStepper&quot;</code><br><small>Reusable quantity stepper component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>QuoteText</strong><br><code>data-component=&quot;QuoteText&quot;</code><br><small>Reusable quote text component.</small></td><td><code>text: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RangeSlider</strong><br><code>data-component=&quot;RangeSlider&quot;</code><br><small>Reusable range slider component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RateLimitPage</strong><br><code>data-component=&quot;RateLimitPage&quot;</code><br><small>Reusable rate limit page component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RatingSlider</strong><br><code>data-component=&quot;RatingSlider&quot;</code><br><small>Reusable rating slider component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RecoveryCodeForm</strong><br><code>data-component=&quot;RecoveryCodeForm&quot;</code><br><small>Reusable recovery code form component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RecurrenceRuleBuilder</strong><br><code>data-component=&quot;RecurrenceRuleBuilder&quot;</code><br><small>Reusable recurrence rule builder component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ReportCard</strong><br><code>data-component=&quot;ReportCard&quot;</code><br><small>Reusable report card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RequestResponseViewer</strong><br><code>data-component=&quot;RequestResponseViewer&quot;</code><br><small>Reusable request response viewer component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RequestViewer</strong><br><code>data-component=&quot;RequestViewer&quot;</code><br><small>Reusable request viewer component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ResetPasswordForm</strong><br><code>data-component=&quot;ResetPasswordForm&quot;</code><br><small>Reusable reset password form component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ResourceCard</strong><br><code>data-component=&quot;ResourceCard&quot;</code><br><small>Reusable resource card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ResourceDownloadCard</strong><br><code>data-component=&quot;ResourceDownloadCard&quot;</code><br><small>Reusable resource download card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ResourceSearch</strong><br><code>data-component=&quot;ResourceSearch&quot;</code><br><small>Reusable resource search component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ResponseViewer</strong><br><code>data-component=&quot;ResponseViewer&quot;</code><br><small>Reusable response viewer component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SDKCard</strong><br><code>data-component=&quot;SDKCard&quot;</code><br><small>Reusable s d k card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SDKLanguageTabs</strong><br><code>data-component=&quot;SDKLanguageTabs&quot;</code><br><small>Reusable s d k language tabs component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SearchCategoryTabs</strong><br><code>data-component=&quot;SearchCategoryTabs&quot;</code><br><small>Reusable search category tabs component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SearchResultItem</strong><br><code>data-component=&quot;SearchResultItem&quot;</code><br><small>Reusable search result item component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SecretDisplay</strong><br><code>data-component=&quot;SecretDisplay&quot;</code><br><small>Reusable secret display component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SecurityContactCard</strong><br><code>data-component=&quot;SecurityContactCard&quot;</code><br><small>Reusable security contact card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SecurityFeatureCard</strong><br><code>data-component=&quot;SecurityFeatureCard&quot;</code><br><small>Reusable security feature card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SecurityReportForm</strong><br><code>data-component=&quot;SecurityReportForm&quot;</code><br><small>Reusable security report form component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ServerErrorPage</strong><br><code>data-component=&quot;ServerErrorPage&quot;</code><br><small>Reusable server error page component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SessionCard</strong><br><code>data-component=&quot;SessionCard&quot;</code><br><small>Reusable session card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SetupChecklist</strong><br><code>data-component=&quot;SetupChecklist&quot;</code><br><small>Reusable setup checklist component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SignInForm</strong><br><code>data-component=&quot;SignInForm&quot;</code><br><small>Reusable sign in form component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SignUpForm</strong><br><code>data-component=&quot;SignUpForm&quot;</code><br><small>Reusable sign up form component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SiteSearch</strong><br><code>data-component=&quot;SiteSearch&quot;</code><br><small>Reusable site search component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Slider</strong><br><code>data-component=&quot;Slider&quot;</code><br><small>Reusable slider component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SmallText</strong><br><code>data-component=&quot;SmallText&quot;</code><br><small>Reusable small text component.</small></td><td><code>text: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SmsComposer</strong><br><code>data-component=&quot;SmsComposer&quot;</code><br><small>Reusable sms composer component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>StatCard</strong><br><code>data-component=&quot;StatCard&quot;</code><br><small>Reusable stat card component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>label: string = &quot;Metric&quot;</code><br><code>value: string = &quot;0&quot;</code><br><code>change: string = &quot;&quot;</code><br><code>trend: string = &quot;neutral&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>StatusSubscribeForm</strong><br><code>data-component=&quot;StatusSubscribeForm&quot;</code><br><small>Reusable status subscribe form component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Stepper</strong><br><code>data-component=&quot;Stepper&quot;</code><br><small>Reusable stepper component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SuccessCard</strong><br><code>data-component=&quot;SuccessCard&quot;</code><br><small>Reusable success card component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SupportRequestForm</strong><br><code>data-component=&quot;SupportRequestForm&quot;</code><br><small>Reusable support request form component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Tabs</strong><br><code>data-component=&quot;Tabs&quot;</code><br><small>Reusable tabs component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>active: string = &quot;first&quot;</code></td><td><code>first</code><br><code>second</code></td><td><code>click</code></td></tr><tr><td><strong>TeamMemberCard</strong><br><code>data-component=&quot;TeamMemberCard&quot;</code><br><small>Reusable team member card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TemplateCard</strong><br><code>data-component=&quot;TemplateCard&quot;</code><br><small>Reusable template card component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TerminalBlock</strong><br><code>data-component=&quot;TerminalBlock&quot;</code><br><small>Reusable terminal block component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TestimonialCard</strong><br><code>data-component=&quot;TestimonialCard&quot;</code><br><small>Reusable testimonial card component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>quote: string = &quot;Great product.&quot;</code><br><code>name: string = &quot;Customer&quot;</code><br><code>role: string = &quot;&quot;</code><br><code>company: string = &quot;&quot;</code><br><code>avatar: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>TestimonialCarousel</strong><br><code>data-component=&quot;TestimonialCarousel&quot;</code><br><small>Reusable testimonial carousel component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ThemeSwitcher</strong><br><code>data-component=&quot;ThemeSwitcher&quot;</code><br><small>Reusable theme switcher component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TimelineItem</strong><br><code>data-component=&quot;TimelineItem&quot;</code><br><small>Reusable timeline item component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>title: string = &quot;Event&quot;</code><br><code>date: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>status: string = &quot;default&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>ToastIcon</strong><br><code>data-component=&quot;ToastIcon&quot;</code><br><small>Reusable toast icon component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Tooltip</strong><br><code>data-component=&quot;Tooltip&quot;</code><br><small>Reusable tooltip component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>text: string = &quot;Helpful information&quot;</code><br><code>position: string = &quot;top&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TotpVerificationForm</strong><br><code>data-component=&quot;TotpVerificationForm&quot;</code><br><small>Reusable totp verification form component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TranslatedText</strong><br><code>data-component=&quot;TranslatedText&quot;</code><br><small>Reusable translated text component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TruncatedText</strong><br><code>data-component=&quot;TruncatedText&quot;</code><br><small>Reusable truncated text component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>UnifiedTimelinePreview</strong><br><code>data-component=&quot;UnifiedTimelinePreview&quot;</code><br><small>Reusable unified timeline preview component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>UploadItem</strong><br><code>data-component=&quot;UploadItem&quot;</code><br><small>Reusable upload item component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>UploadPreview</strong><br><code>data-component=&quot;UploadPreview&quot;</code><br><small>Reusable upload preview component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>UserCard</strong><br><code>data-component=&quot;UserCard&quot;</code><br><small>Reusable user card component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ValueCard</strong><br><code>data-component=&quot;ValueCard&quot;</code><br><small>Reusable value card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>VerticalTabs</strong><br><code>data-component=&quot;VerticalTabs&quot;</code><br><small>Reusable vertical tabs component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>VideoCard</strong><br><code>data-component=&quot;VideoCard&quot;</code><br><small>Reusable video card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>VideoUpload</strong><br><code>data-component=&quot;VideoUpload&quot;</code><br><small>Reusable video upload component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>VoiceScriptComposer</strong><br><code>data-component=&quot;VoiceScriptComposer&quot;</code><br><small>Reusable voice script composer component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>VolumeSlider</strong><br><code>data-component=&quot;VolumeSlider&quot;</code><br><small>Reusable volume slider component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>WarningCard</strong><br><code>data-component=&quot;WarningCard&quot;</code><br><small>Reusable warning card component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>WebhookEventCard</strong><br><code>data-component=&quot;WebhookEventCard&quot;</code><br><small>Reusable webhook event card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>WebhookPayloadViewer</strong><br><code>data-component=&quot;WebhookPayloadViewer&quot;</code><br><small>Reusable webhook payload viewer component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>WebinarCard</strong><br><code>data-component=&quot;WebinarCard&quot;</code><br><small>Reusable webinar card component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>WebinarRegistrationForm</strong><br><code>data-component=&quot;WebinarRegistrationForm&quot;</code><br><small>Reusable webinar registration form component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>WhatsAppComposer</strong><br><code>data-component=&quot;WhatsAppComposer&quot;</code><br><small>Reusable whats app composer component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Wizard</strong><br><code>data-component=&quot;Wizard&quot;</code><br><small>Reusable wizard component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>WorkflowCanvasPreview</strong><br><code>data-component=&quot;WorkflowCanvasPreview&quot;</code><br><small>Reusable workflow canvas preview component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>WorkspaceCard</strong><br><code>data-component=&quot;WorkspaceCard&quot;</code><br><small>Reusable workspace card component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>WorkspaceSwitcher</strong><br><code>data-component=&quot;WorkspaceSwitcher&quot;</code><br><small>Reusable workspace switcher component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ZoomSlider</strong><br><code>data-component=&quot;ZoomSlider&quot;</code><br><small>Reusable zoom slider component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>image: string = &quot;&quot;</code><br><code>alt: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr></tbody></table></div><h3>Core</h3><div class="table-wrap"><table><thead><tr><th>Component</th><th>Props</th><th>Slots</th><th>Events</th></tr></thead><tbody><tr><td><strong>AnnouncementBar</strong><br><code>data-component=&quot;AnnouncementBar&quot;</code><br><small>Reusable announcement bar component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>badge: string = &quot;New&quot;</code><br><code>message: string = &quot;WRNexusJS Organizations is now available.&quot;</code><br><code>description: string = &quot;Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO.&quot;</code><br><code>href: string = &quot;/organizations&quot;</code><br><code>actionLabel: string = &quot;Explore organizations&quot;</code><br><code>ariaLabel: string = &quot;Announcement&quot;</code></td><td>None</td><td><code>click</code></td></tr><tr><td><strong>AspectRatio</strong><br><code>data-component=&quot;AspectRatio&quot;</code><br><small>Reusable aspect ratio component.</small></td><td><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>BackToTop</strong><br><code>data-component=&quot;BackToTop&quot;</code><br><small>Reusable back to top component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>label: string = &quot;Back to top&quot;</code><br><code>assistiveLabel: string = &quot;Return to the top of the page&quot;</code><br><code>threshold: number = 500</code></td><td>None</td><td><code>click</code></td></tr><tr><td><strong>Breadcrumbs</strong><br><code>data-component=&quot;Breadcrumbs&quot;</code><br><small>Reusable breadcrumbs component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>items: string = []</code><br><code>centered: boolean = false</code><br><code>compact: boolean = false</code><br><code>showHome: boolean = true</code><br><code>homeLabel: string = &quot;Home&quot;</code><br><code>homeHref: string = &quot;/&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>Checkbox</strong><br><code>data-component=&quot;Checkbox&quot;</code><br><small>Reusable checkbox component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>id: string = &quot;&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>label: string = &quot;Checkbox&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>checked: boolean = false</code><br><code>disabled: boolean = false</code></td><td>None</td><td>None</td></tr><tr><td><strong>Chip</strong><br><code>data-component=&quot;Chip&quot;</code><br><small>Reusable chip component.</small></td><td><code>label: string = &quot;Chip&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Cluster</strong><br><code>data-component=&quot;Cluster&quot;</code><br><small>Reusable cluster component.</small></td><td><code>gap: string = &quot;4&quot;</code><br><code>className: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Combobox</strong><br><code>data-component=&quot;Combobox&quot;</code><br><small>Reusable combobox component.</small></td><td><code>id: string = &quot;combobox&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>label: string = &quot;Choose an option&quot;</code><br><code>placeholder: string = &quot;Search options&quot;</code><br><code>options: string = []</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>ContactSalesBanner</strong><br><code>data-component=&quot;ContactSalesBanner&quot;</code><br><small>Reusable contact sales banner component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>eyebrow: string = &quot;Enterprise identity&quot;</code><br><code>title: string = &quot;Ready to secure your next application?&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>primaryLabel: string = &quot;Contact sales&quot;</code><br><code>primaryHref: string = &quot;/contact&quot;</code><br><code>secondaryLabel: string = &quot;Start free&quot;</code><br><code>secondaryHref: string = &quot;/sign-up&quot;</code><br><code>iconClass: string = &quot;icon-[lucide--messages-square]&quot;</code><br><code>centered: boolean = false</code><br><code>compact: boolean = false</code><br><code>points: string = []</code><br><code>trustPoints: string = []</code></td><td>None</td><td>None</td></tr><tr><td><strong>Container</strong><br><code>data-component=&quot;Container&quot;</code><br><small>Reusable container component.</small></td><td><code>size: string = &quot;default&quot;</code><br><code>className: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CookieConsent</strong><br><code>data-component=&quot;CookieConsent&quot;</code><br><small>Reusable cookie consent component.</small></td><td><code>class: string = &quot;&quot;</code></td><td>None</td><td><code>click</code><br><code>change</code></td></tr><tr><td><strong>DevelopersMegaMenu</strong><br><code>data-component=&quot;DevelopersMegaMenu&quot;</code><br><small>Reusable developers mega menu component.</small></td><td><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>disclosure</strong><br><code>data-component=&quot;disclosure&quot;</code><br><small>Reusable disclosure component.</small></td><td><code>summary: string = &quot;Details&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DisplayHeading</strong><br><code>data-component=&quot;DisplayHeading&quot;</code><br><small>Reusable display heading component.</small></td><td><code>text: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Divider</strong><br><code>data-component=&quot;Divider&quot;</code><br><small>Reusable divider component.</small></td><td><code>className: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Drawer</strong><br><code>data-component=&quot;Drawer&quot;</code><br><small>Reusable drawer component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>title: string = &quot;Panel&quot;</code><br><code>open: boolean = false</code><br><code>side: string = &quot;right&quot;</code></td><td><code>default</code></td><td><code>click</code></td></tr><tr><td><strong>FAQ</strong><br><code>data-component=&quot;FAQ&quot;</code><br><small>Reusable faq component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;Frequently asked questions&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>items: string = []</code><br><code>centered: boolean = true</code><br><code>allowMultiple: boolean = false</code><br><code>defaultOpenIndex: number = 0</code></td><td>None</td><td>None</td></tr><tr><td><strong>FAQAccordion</strong><br><code>data-component=&quot;FAQAccordion&quot;</code><br><small>Reusable faqaccordion component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;Frequently asked questions&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>items: string = []</code><br><code>centered: boolean = true</code><br><code>compact: boolean = false</code><br><code>allowMultiple: boolean = false</code><br><code>defaultOpenIndex: number = 0</code><br><code>showContact: boolean = false</code><br><code>contactText: string = &quot;Still have questions?&quot;</code><br><code>contactLabel: string = &quot;Contact support&quot;</code><br><code>contactHref: string = &quot;/support&quot;</code></td><td>None</td><td><code>click</code></td></tr><tr><td><strong>file-upload</strong><br><code>data-component=&quot;file-upload&quot;</code><br><small>Reusable file-upload component.</small></td><td><code>store: string = &quot;public&quot;</code><br><code>endpoint: string = &quot;/api/upload&quot;</code><br><code>accept: string = &quot;&quot;</code><br><code>multiple: boolean = false</code><br><code>max: number = 0</code><br><code>label: string = &quot;Drag files here or click to browse&quot;</code><br><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>FilterBar</strong><br><code>data-component=&quot;FilterBar&quot;</code><br><small>Reusable filter bar component.</small></td><td><code>label: string = &quot;Filters&quot;</code><br><code>clearLabel: string = &quot;Clear filters&quot;</code><br><code>showClear: boolean = true</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Flex</strong><br><code>data-component=&quot;Flex&quot;</code><br><small>Reusable flex component.</small></td><td><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FormError</strong><br><code>data-component=&quot;FormError&quot;</code><br><small>Reusable form error component.</small></td><td><code>id: string = &quot;&quot;</code><br><code>message: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FullBleed</strong><br><code>data-component=&quot;FullBleed&quot;</code><br><small>Reusable full bleed component.</small></td><td><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>hstack</strong><br><code>data-component=&quot;hstack&quot;</code><br><small>Reusable hstack component.</small></td><td><code>gap: string = &quot;4&quot;</code><br><code>align: string = &quot;center&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Inline</strong><br><code>data-component=&quot;Inline&quot;</code><br><small>Reusable inline component.</small></td><td><code>gap: string = &quot;4&quot;</code><br><code>className: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>input</strong><br><code>data-component=&quot;input&quot;</code><br><small>Reusable input component.</small></td><td><code>type: string = &quot;text&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>LegalTableOfContents</strong><br><code>data-component=&quot;LegalTableOfContents&quot;</code><br><small>Reusable legal table of contents component.</small></td><td><code>title: string = &quot;On this page&quot;</code><br><code>items: string = []</code><br><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>Link</strong><br><code>data-component=&quot;Link&quot;</code><br><small>Reusable link component.</small></td><td><code>href: string = &quot;#&quot;</code><br><code>label: string = &quot;Link&quot;</code><br><code>external: boolean = false</code><br><code>className: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>LogoCloud</strong><br><code>data-component=&quot;LogoCloud&quot;</code><br><small>Reusable logo cloud component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;Trusted by teams building modern products&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>logos: string = []</code><br><code>centered: boolean = true</code><br><code>compact: boolean = false</code><br><code>variant: string = &quot;strip&quot;</code><br><code>grayscale: boolean = true</code><br><code>showNames: boolean = false</code><br><code>maxItems: number = 8</code></td><td>None</td><td>None</td></tr><tr><td><strong>Modal</strong><br><code>data-component=&quot;Modal&quot;</code><br><small>Reusable modal component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>title: string = &quot;Dialog&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>size: string = &quot;md&quot;</code><br><code>closeLabel: string = &quot;Close&quot;</code></td><td><code>default</code></td><td><code>click</code></td></tr><tr><td><strong>MultiSelect</strong><br><code>data-component=&quot;MultiSelect&quot;</code><br><small>Reusable multi select component.</small></td><td><code>id: string = &quot;multi-select&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>label: string = &quot;Choose options&quot;</code><br><code>options: string = []</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>size: number = 5</code><br><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>NarrowContainer</strong><br><code>data-component=&quot;NarrowContainer&quot;</code><br><small>Reusable narrow container component.</small></td><td><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>NotificationDot</strong><br><code>data-component=&quot;NotificationDot&quot;</code><br><small>Reusable notification dot component.</small></td><td><code>label: string = &quot;Notification&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PageHeader</strong><br><code>data-component=&quot;PageHeader&quot;</code><br><small>Reusable page header component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>primaryLabel: string = &quot;&quot;</code><br><code>primaryHref: string = &quot;&quot;</code><br><code>secondaryLabel: string = &quot;&quot;</code><br><code>secondaryHref: string = &quot;&quot;</code><br><code>icon: string = &quot;sparkles&quot;</code><br><code>centered: boolean = false</code><br><code>compact: boolean = false</code><br><code>showBreadcrumbs: boolean = false</code><br><code>breadcrumbParent: string = &quot;&quot;</code><br><code>breadcrumbParentHref: string = &quot;&quot;</code><br><code>breadcrumbCurrent: string = &quot;&quot;</code><br><code>highlights: string = []</code></td><td>None</td><td>None</td></tr><tr><td><strong>PageHeading</strong><br><code>data-component=&quot;PageHeading&quot;</code><br><small>Reusable page heading component.</small></td><td><code>text: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PageShell</strong><br><code>data-component=&quot;PageShell&quot;</code><br><small>Reusable page shell component.</small></td><td><code>className: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Pagination</strong><br><code>data-component=&quot;Pagination&quot;</code><br><small>Reusable pagination component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>currentPage: number = 1</code><br><code>totalPages: number = 1</code><br><code>previousHref: string = &quot;&quot;</code><br><code>nextHref: string = &quot;&quot;</code><br><code>pages: string = []</code><br><code>showNumbers: boolean = true</code><br><code>showSummary: boolean = true</code><br><code>totalItems: number = 0</code><br><code>pageSize: number = 10</code><br><code>compact: boolean = false</code><br><code>centered: boolean = false</code></td><td>None</td><td>None</td></tr><tr><td><strong>Pill</strong><br><code>data-component=&quot;Pill&quot;</code><br><small>Reusable pill component.</small></td><td><code>label: string = &quot;Pill&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProductMegaMenu</strong><br><code>data-component=&quot;ProductMegaMenu&quot;</code><br><small>Reusable product mega menu component.</small></td><td><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>progress</strong><br><code>data-component=&quot;progress&quot;</code><br><small>Reusable progress component.</small></td><td><code>value: number = 0</code><br><code>max: number = 100</code><br><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>ProgressBar</strong><br><code>data-component=&quot;ProgressBar&quot;</code><br><small>Reusable progress bar component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>value: number = 0</code><br><code>max: number = 100</code><br><code>label: string = &quot;Progress&quot;</code><br><code>showValue: boolean = true</code></td><td>None</td><td>None</td></tr><tr><td><strong>PublicFooter</strong><br><code>data-component=&quot;PublicFooter&quot;</code><br><small>Reusable public footer component.</small></td><td><code>class: string = &quot;&quot;</code></td><td>None</td><td><code>submit</code></td></tr><tr><td><strong>PublicMobileNavigation</strong><br><code>data-component=&quot;PublicMobileNavigation&quot;</code><br><small>Reusable public mobile navigation component.</small></td><td><code>class: string = &quot;&quot;</code></td><td>None</td><td><code>click</code></td></tr><tr><td><strong>PublicSearch</strong><br><code>data-component=&quot;PublicSearch&quot;</code><br><small>Reusable public search component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>query: string = &quot;&quot;</code><br><code>placeholder: string = &quot;Search...&quot;</code><br><code>label: string = &quot;Search&quot;</code><br><code>action: string = &quot;&quot;</code><br><code>method: string = &quot;get&quot;</code><br><code>name: string = &quot;q&quot;</code><br><code>buttonLabel: string = &quot;&quot;</code><br><code>clearLabel: string = &quot;Clear search&quot;</code><br><code>size: string = &quot;default&quot;</code><br><code>centered: boolean = false</code><br><code>fullWidth: boolean = false</code><br><code>showShortcut: boolean = false</code><br><code>shortcutLabel: string = &quot;⌘ K&quot;</code><br><code>suggestions: string = []</code></td><td>None</td><td><code>input</code><br><code>focus</code><br><code>blur</code><br><code>click</code></td></tr><tr><td><strong>Radio</strong><br><code>data-component=&quot;Radio&quot;</code><br><small>Reusable radio component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>id: string = &quot;&quot;</code><br><code>name: string = &quot;choice&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>label: string = &quot;Option&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>checked: boolean = false</code><br><code>disabled: boolean = false</code></td><td>None</td><td>None</td></tr><tr><td><strong>ScrollArea</strong><br><code>data-component=&quot;ScrollArea&quot;</code><br><small>Reusable scroll area component.</small></td><td><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SDKTabs</strong><br><code>data-component=&quot;SDKTabs&quot;</code><br><small>Reusable sdktabs component.</small></td><td><code>label: string = &quot;SDK languages&quot;</code><br><code>tabs: string = []</code><br><code>defaultIndex: number = 0</code><br><code>class: string = &quot;&quot;</code></td><td>None</td><td><code>click</code></td></tr><tr><td><strong>SectionHeading</strong><br><code>data-component=&quot;SectionHeading&quot;</code><br><small>Reusable section heading component.</small></td><td><code>text: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Select</strong><br><code>data-component=&quot;Select&quot;</code><br><small>Reusable select component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>id: string = &quot;&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>label: string = &quot;Select&quot;</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SocialShare</strong><br><code>data-component=&quot;SocialShare&quot;</code><br><small>Reusable social share component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>title: string = &quot;Share this page&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>url: string = &quot;&quot;</code><br><code>shareText: string = &quot;&quot;</code><br><code>centered: boolean = false</code><br><code>compact: boolean = false</code><br><code>showTitle: boolean = true</code><br><code>showCopy: boolean = true</code><br><code>networks: string = []</code></td><td>None</td><td><code>click</code></td></tr><tr><td><strong>spacer</strong><br><code>data-component=&quot;spacer&quot;</code><br><small>Reusable spacer component.</small></td><td><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>Spinner</strong><br><code>data-component=&quot;Spinner&quot;</code><br><small>Reusable spinner component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>label: string = &quot;Loading&quot;</code><br><code>size: string = &quot;md&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>Stack</strong><br><code>data-component=&quot;Stack&quot;</code><br><small>Reusable stack component.</small></td><td><code>gap: string = &quot;4&quot;</code><br><code>className: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>StatusBanner</strong><br><code>data-component=&quot;StatusBanner&quot;</code><br><small>Reusable status banner component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>type: string = &quot;info&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;&quot;</code><br><code>actionHref: string = &quot;&quot;</code><br><code>dismissible: boolean = true</code><br><code>compact: boolean = false</code><br><code>details: string = []</code></td><td>None</td><td><code>click</code></td></tr><tr><td><strong>Sticky</strong><br><code>data-component=&quot;Sticky&quot;</code><br><small>Reusable sticky component.</small></td><td><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SubsectionHeading</strong><br><code>data-component=&quot;SubsectionHeading&quot;</code><br><small>Reusable subsection heading component.</small></td><td><code>text: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Surface</strong><br><code>data-component=&quot;Surface&quot;</code><br><small>Reusable surface component.</small></td><td><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Switch</strong><br><code>data-component=&quot;Switch&quot;</code><br><small>Reusable switch component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>id: string = &quot;&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>label: string = &quot;Switch&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>checked: boolean = false</code><br><code>disabled: boolean = false</code></td><td>None</td><td><code>click</code></td></tr><tr><td><strong>tag</strong><br><code>data-component=&quot;tag&quot;</code><br><small>Reusable tag component.</small></td><td><code>label: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Textarea</strong><br><code>data-component=&quot;Textarea&quot;</code><br><small>Reusable textarea component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>id: string = &quot;&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>label: string = &quot;Message&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>rows: number = 5</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code></td><td>None</td><td>None</td></tr><tr><td><strong>theme-toggle</strong><br><code>data-component=&quot;theme-toggle&quot;</code><br><small>Reusable theme-toggle component.</small></td><td><code>label: string = &quot;Toggle theme&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Toast</strong><br><code>data-component=&quot;Toast&quot;</code><br><small>Reusable toast component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>title: string = &quot;Saved&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>variant: string = &quot;success&quot;</code><br><code>duration: number = 5000</code></td><td>None</td><td><code>click</code></td></tr><tr><td><strong>ToastHost</strong><br><code>data-component=&quot;ToastHost&quot;</code><br><small>Reusable toast host component.</small></td><td><code>class: string = &quot;&quot;</code></td><td>None</td><td><code>click</code></td></tr><tr><td><strong>Typography</strong><br><code>data-component=&quot;Typography&quot;</code><br><small>Reusable typography component.</small></td><td><code>as: string = &quot;p&quot;</code><br><code>variant: string = &quot;body&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>VisuallyHidden</strong><br><code>data-component=&quot;VisuallyHidden&quot;</code><br><small>Reusable visually hidden component.</small></td><td><code>className: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Well</strong><br><code>data-component=&quot;Well&quot;</code><br><small>Reusable well component.</small></td><td><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>WideContainer</strong><br><code>data-component=&quot;WideContainer&quot;</code><br><small>Reusable wide container component.</small></td><td><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr></tbody></table></div><h3>Data</h3><div class="table-wrap"><table><thead><tr><th>Component</th><th>Props</th><th>Slots</th><th>Events</th></tr></thead><tbody><tr><td><strong>ActiveFilterList</strong><br><code>data-component=&quot;ActiveFilterList&quot;</code><br><small>Reusable active filter list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ActivityList</strong><br><code>data-component=&quot;ActivityList&quot;</code><br><small>Reusable activity list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ApiHeaderTable</strong><br><code>data-component=&quot;ApiHeaderTable&quot;</code><br><small>Reusable api header table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ApiParameterTable</strong><br><code>data-component=&quot;ApiParameterTable&quot;</code><br><small>Reusable api parameter table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ApiSchemaTable</strong><br><code>data-component=&quot;ApiSchemaTable&quot;</code><br><small>Reusable api schema table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AuditTable</strong><br><code>data-component=&quot;AuditTable&quot;</code><br><small>Reusable audit table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AutoGrid</strong><br><code>data-component=&quot;AutoGrid&quot;</code><br><small>Reusable auto grid component.</small></td><td><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>BlogGrid</strong><br><code>data-component=&quot;BlogGrid&quot;</code><br><small>Reusable blog grid component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>BlogList</strong><br><code>data-component=&quot;BlogList&quot;</code><br><small>Reusable blog list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CalendarGrid</strong><br><code>data-component=&quot;CalendarGrid&quot;</code><br><small>Reusable calendar grid component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CapabilityGrid</strong><br><code>data-component=&quot;CapabilityGrid&quot;</code><br><small>Reusable capability grid component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CareerBenefitsGrid</strong><br><code>data-component=&quot;CareerBenefitsGrid&quot;</code><br><small>Reusable career benefits grid component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ChannelComparisonTable</strong><br><code>data-component=&quot;ChannelComparisonTable&quot;</code><br><small>Reusable channel comparison table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ChannelRateTable</strong><br><code>data-component=&quot;ChannelRateTable&quot;</code><br><small>Reusable channel rate table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ColorGrid</strong><br><code>data-component=&quot;ColorGrid&quot;</code><br><small>Reusable color grid component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ComparisonTable</strong><br><code>data-component=&quot;ComparisonTable&quot;</code><br><small>Reusable comparison table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ComplianceBadgeList</strong><br><code>data-component=&quot;ComplianceBadgeList&quot;</code><br><small>Reusable compliance badge list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ConversationList</strong><br><code>data-component=&quot;ConversationList&quot;</code><br><small>Reusable conversation list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CookieCategoryList</strong><br><code>data-component=&quot;CookieCategoryList&quot;</code><br><small>Reusable cookie category list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CookieDetailsTable</strong><br><code>data-component=&quot;CookieDetailsTable&quot;</code><br><small>Reusable cookie details table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CookieTable</strong><br><code>data-component=&quot;CookieTable&quot;</code><br><small>Reusable cookie table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DataRetentionTable</strong><br><code>data-component=&quot;DataRetentionTable&quot;</code><br><small>Reusable data retention table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DataTable</strong><br><code>data-component=&quot;DataTable&quot;</code><br><small>Reusable data table component.</small></td><td><code>caption: string = &quot;Data table&quot;</code><br><code>columns: string = []</code><br><code>rows: string = []</code><br><code>emptyMessage: string = &quot;No data available.&quot;</code><br><code>striped: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>DefinitionList</strong><br><code>data-component=&quot;DefinitionList&quot;</code><br><small>Reusable definition list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DescriptionList</strong><br><code>data-component=&quot;DescriptionList&quot;</code><br><small>Reusable description list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>EventTable</strong><br><code>data-component=&quot;EventTable&quot;</code><br><small>Reusable event table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FeatureComparisonTable</strong><br><code>data-component=&quot;FeatureComparisonTable&quot;</code><br><small>Reusable feature comparison table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FeatureGrid</strong><br><code>data-component=&quot;FeatureGrid&quot;</code><br><small>Reusable feature grid component.</small></td><td><code>columns: number = 3</code><br><code>className: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FeatureList</strong><br><code>data-component=&quot;FeatureList&quot;</code><br><small>Reusable feature list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FileList</strong><br><code>data-component=&quot;FileList&quot;</code><br><small>Reusable file list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FilterableTable</strong><br><code>data-component=&quot;FilterableTable&quot;</code><br><small>Reusable filterable table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FormGrid</strong><br><code>data-component=&quot;FormGrid&quot;</code><br><small>Reusable form grid component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FormRow</strong><br><code>data-component=&quot;FormRow&quot;</code><br><small>Reusable form row component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Grid</strong><br><code>data-component=&quot;Grid&quot;</code><br><small>Reusable grid component.</small></td><td><code>gap: string = &quot;4&quot;</code><br><code>className: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>GuideGrid</strong><br><code>data-component=&quot;GuideGrid&quot;</code><br><small>Reusable guide grid component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>IncidentList</strong><br><code>data-component=&quot;IncidentList&quot;</code><br><small>Reusable incident list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>KeyValueTable</strong><br><code>data-component=&quot;KeyValueTable&quot;</code><br><small>Reusable key value table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LeadershipGrid</strong><br><code>data-component=&quot;LeadershipGrid&quot;</code><br><small>Reusable leadership grid component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LegalBulletList</strong><br><code>data-component=&quot;LegalBulletList&quot;</code><br><small>Reusable legal bullet list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LegalDefinitionList</strong><br><code>data-component=&quot;LegalDefinitionList&quot;</code><br><small>Reusable legal definition list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LegalTable</strong><br><code>data-component=&quot;LegalTable&quot;</code><br><small>Reusable legal table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>List</strong><br><code>data-component=&quot;List&quot;</code><br><small>Reusable list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LogTable</strong><br><code>data-component=&quot;LogTable&quot;</code><br><small>Reusable log table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MemberList</strong><br><code>data-component=&quot;MemberList&quot;</code><br><small>Reusable member list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MetricGrid</strong><br><code>data-component=&quot;MetricGrid&quot;</code><br><small>Reusable metric grid component.</small></td><td><code>label: string = &quot;Key metrics&quot;</code><br><code>metrics: string = []</code><br><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>NotificationList</strong><br><code>data-component=&quot;NotificationList&quot;</code><br><small>Reusable notification list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PartnerLogoGrid</strong><br><code>data-component=&quot;PartnerLogoGrid&quot;</code><br><small>Reusable partner logo grid component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PasswordRequirementList</strong><br><code>data-component=&quot;PasswordRequirementList&quot;</code><br><small>Reusable password requirement list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PlanFeatureList</strong><br><code>data-component=&quot;PlanFeatureList&quot;</code><br><small>Reusable plan feature list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PlanLimitList</strong><br><code>data-component=&quot;PlanLimitList&quot;</code><br><small>Reusable plan limit list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PolicyVersionTable</strong><br><code>data-component=&quot;PolicyVersionTable&quot;</code><br><small>Reusable policy version table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PricingComparisonTable</strong><br><code>data-component=&quot;PricingComparisonTable&quot;</code><br><small>Reusable pricing comparison table component.</small></td><td><code>caption: string = &quot;Plan comparison&quot;</code><br><code>plans: string = []</code><br><code>features: string = []</code><br><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>PricingGrid</strong><br><code>data-component=&quot;PricingGrid&quot;</code><br><small>Reusable pricing grid component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PricingTable</strong><br><code>data-component=&quot;PricingTable&quot;</code><br><small>Reusable pricing table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProductFeatureList</strong><br><code>data-component=&quot;ProductFeatureList&quot;</code><br><small>Reusable product feature list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProductGrid</strong><br><code>data-component=&quot;ProductGrid&quot;</code><br><small>Reusable product grid component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProductIntegrationList</strong><br><code>data-component=&quot;ProductIntegrationList&quot;</code><br><small>Reusable product integration list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProductList</strong><br><code>data-component=&quot;ProductList&quot;</code><br><small>Reusable product list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProductUseCaseList</strong><br><code>data-component=&quot;ProductUseCaseList&quot;</code><br><small>Reusable product use case list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RateTable</strong><br><code>data-component=&quot;RateTable&quot;</code><br><small>Reusable rate table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RegionAvailabilityTable</strong><br><code>data-component=&quot;RegionAvailabilityTable&quot;</code><br><small>Reusable region availability table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ResponsiveTable</strong><br><code>data-component=&quot;ResponsiveTable&quot;</code><br><small>Reusable responsive table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RetentionTable</strong><br><code>data-component=&quot;RetentionTable&quot;</code><br><small>Reusable retention table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SecurityPillarGrid</strong><br><code>data-component=&quot;SecurityPillarGrid&quot;</code><br><small>Reusable security pillar grid component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SecurityPracticeList</strong><br><code>data-component=&quot;SecurityPracticeList&quot;</code><br><small>Reusable security practice list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ServiceLevelTable</strong><br><code>data-component=&quot;ServiceLevelTable&quot;</code><br><small>Reusable service level table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ServiceStatusList</strong><br><code>data-component=&quot;ServiceStatusList&quot;</code><br><small>Reusable service status list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ServiceStatusRow</strong><br><code>data-component=&quot;ServiceStatusRow&quot;</code><br><small>Reusable service status row component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SlaTable</strong><br><code>data-component=&quot;SlaTable&quot;</code><br><small>Reusable sla table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SortableTable</strong><br><code>data-component=&quot;SortableTable&quot;</code><br><small>Reusable sortable table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>StatusTable</strong><br><code>data-component=&quot;StatusTable&quot;</code><br><small>Reusable status table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SubprocessorTable</strong><br><code>data-component=&quot;SubprocessorTable&quot;</code><br><small>Reusable subprocessor table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Table</strong><br><code>data-component=&quot;Table&quot;</code><br><small>Reusable table component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>caption: string = &quot;Data table&quot;</code><br><code>responsive: boolean = true</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TableRow</strong><br><code>data-component=&quot;TableRow&quot;</code><br><small>Reusable table row component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TreeTable</strong><br><code>data-component=&quot;TreeTable&quot;</code><br><small>Reusable tree table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TrustBadgeList</strong><br><code>data-component=&quot;TrustBadgeList&quot;</code><br><small>Reusable trust badge list component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>UsagePricingTable</strong><br><code>data-component=&quot;UsagePricingTable&quot;</code><br><small>Reusable usage pricing table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ValuesGrid</strong><br><code>data-component=&quot;ValuesGrid&quot;</code><br><small>Reusable values grid component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>VirtualizedTable</strong><br><code>data-component=&quot;VirtualizedTable&quot;</code><br><small>Reusable virtualized table component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>empty: boolean = false</code><br><code>emptyText: string = &quot;No items available.&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr></tbody></table></div><h3>Feedback</h3><div class="table-wrap"><table><thead><tr><th>Component</th><th>Props</th><th>Slots</th><th>Events</th></tr></thead><tbody><tr><td><strong>AccountStatusBanner</strong><br><code>data-component=&quot;AccountStatusBanner&quot;</code><br><small>Reusable account status banner component.</small></td><td><code>label: string = &quot;AccountStatus&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Alert</strong><br><code>data-component=&quot;Alert&quot;</code><br><small>Reusable alert component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>title: string = &quot;Notice&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>variant: string = &quot;info&quot;</code><br><code>dismissible: boolean = false</code></td><td><code>default</code></td><td><code>click</code></td></tr><tr><td><strong>ApiAuthenticationNotice</strong><br><code>data-component=&quot;ApiAuthenticationNotice&quot;</code><br><small>Reusable api authentication notice component.</small></td><td><code>label: string = &quot;ApiAuthentication&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ApiMethodBadge</strong><br><code>data-component=&quot;ApiMethodBadge&quot;</code><br><small>Reusable api method badge component.</small></td><td><code>label: string = &quot;ApiMethod&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ApiRateLimitNotice</strong><br><code>data-component=&quot;ApiRateLimitNotice&quot;</code><br><small>Reusable api rate limit notice component.</small></td><td><code>label: string = &quot;ApiRateLimit&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ApiVersionBadge</strong><br><code>data-component=&quot;ApiVersionBadge&quot;</code><br><small>Reusable api version badge component.</small></td><td><code>label: string = &quot;ApiVersion&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Badge</strong><br><code>data-component=&quot;Badge&quot;</code><br><small>Reusable badge component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>label: string = &quot;Badge&quot;</code><br><code>variant: string = &quot;neutral&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>Banner</strong><br><code>data-component=&quot;Banner&quot;</code><br><small>Reusable banner component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>text: string = &quot;Announcement&quot;</code><br><code>href: string = &quot;&quot;</code><br><code>actionLabel: string = &quot;Learn more&quot;</code><br><code>variant: string = &quot;brand&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>BetaBadge</strong><br><code>data-component=&quot;BetaBadge&quot;</code><br><small>Reusable beta badge component.</small></td><td><code>label: string = &quot;Beta&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CardSkeleton</strong><br><code>data-component=&quot;CardSkeleton&quot;</code><br><small>Reusable card skeleton component.</small></td><td><code>label: string = &quot;Card&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CertificationBadge</strong><br><code>data-component=&quot;CertificationBadge&quot;</code><br><small>Reusable certification badge component.</small></td><td><code>label: string = &quot;Certification&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ChannelBadge</strong><br><code>data-component=&quot;ChannelBadge&quot;</code><br><small>Reusable channel badge component.</small></td><td><code>label: string = &quot;Channel&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CharacterCounter</strong><br><code>data-component=&quot;CharacterCounter&quot;</code><br><small>Reusable character counter component.</small></td><td><code>label: string = &quot;Character&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ChartEmptyState</strong><br><code>data-component=&quot;ChartEmptyState&quot;</code><br><small>Reusable chart empty state component.</small></td><td><code>label: string = &quot;ChartEmpty&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CodeLanguageBadge</strong><br><code>data-component=&quot;CodeLanguageBadge&quot;</code><br><small>Reusable code language badge component.</small></td><td><code>label: string = &quot;CodeLanguage&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ComingSoonBadge</strong><br><code>data-component=&quot;ComingSoonBadge&quot;</code><br><small>Reusable coming soon badge component.</small></td><td><code>label: string = &quot;ComingSoon&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ComingSoonState</strong><br><code>data-component=&quot;ComingSoonState&quot;</code><br><small>Reusable coming soon state component.</small></td><td><code>label: string = &quot;ComingSoon&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CookieBanner</strong><br><code>data-component=&quot;CookieBanner&quot;</code><br><small>Reusable cookie banner component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>title: string = &quot;We use cookies&quot;</code><br><code>description: string = &quot;We use essential cookies and optional analytics to improve your experience.&quot;</code><br><code>privacyHref: string = &quot;/privacy&quot;</code></td><td>None</td><td><code>click</code></td></tr><tr><td><strong>Counter</strong><br><code>data-component=&quot;Counter&quot;</code><br><small>Reusable counter component.</small></td><td><code>label: string = &quot;Status&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DeprecatedFeatureAlert</strong><br><code>data-component=&quot;DeprecatedFeatureAlert&quot;</code><br><small>Reusable deprecated feature alert component.</small></td><td><code>label: string = &quot;DeprecatedFeature&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>EmptyState</strong><br><code>data-component=&quot;EmptyState&quot;</code><br><small>Reusable empty state component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;Nothing found&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>iconClass: string = &quot;icon-[lucide--inbox]&quot;</code><br><code>primaryLabel: string = &quot;&quot;</code><br><code>primaryHref: string = &quot;&quot;</code><br><code>secondaryLabel: string = &quot;&quot;</code><br><code>secondaryHref: string = &quot;&quot;</code><br><code>compact: boolean = false</code><br><code>centered: boolean = true</code><br><code>suggestions: string = []</code></td><td>None</td><td>None</td></tr><tr><td><strong>ErrorState</strong><br><code>data-component=&quot;ErrorState&quot;</code><br><small>Reusable error state component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>type: string = &quot;error&quot;</code><br><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;Something went wrong&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>errorCode: string = &quot;&quot;</code><br><code>iconClass: string = &quot;&quot;</code><br><code>primaryLabel: string = &quot;&quot;</code><br><code>primaryHref: string = &quot;&quot;</code><br><code>secondaryLabel: string = &quot;&quot;</code><br><code>secondaryHref: string = &quot;&quot;</code><br><code>retryLabel: string = &quot;&quot;</code><br><code>retryAction: string = &quot;&quot;</code><br><code>centered: boolean = true</code><br><code>compact: boolean = false</code><br><code>details: string = []</code></td><td>None</td><td><code>click</code></td></tr><tr><td><strong>FeatureUnavailableState</strong><br><code>data-component=&quot;FeatureUnavailableState&quot;</code><br><small>Reusable feature unavailable state component.</small></td><td><code>label: string = &quot;FeatureUnavailable&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FileTypeBadge</strong><br><code>data-component=&quot;FileTypeBadge&quot;</code><br><small>Reusable file type badge component.</small></td><td><code>label: string = &quot;FileType&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FooterStatusIndicator</strong><br><code>data-component=&quot;FooterStatusIndicator&quot;</code><br><small>Reusable footer status indicator component.</small></td><td><code>label: string = &quot;FooterStatus&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ForbiddenState</strong><br><code>data-component=&quot;ForbiddenState&quot;</code><br><small>Reusable forbidden state component.</small></td><td><code>label: string = &quot;Forbidden&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FormAlert</strong><br><code>data-component=&quot;FormAlert&quot;</code><br><small>Reusable form alert component.</small></td><td><code>label: string = &quot;Form&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>GuideDifficultyBadge</strong><br><code>data-component=&quot;GuideDifficultyBadge&quot;</code><br><small>Reusable guide difficulty badge component.</small></td><td><code>label: string = &quot;GuideDifficulty&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>HealthIndicator</strong><br><code>data-component=&quot;HealthIndicator&quot;</code><br><small>Reusable health indicator component.</small></td><td><code>label: string = &quot;Health&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>IncidentAlert</strong><br><code>data-component=&quot;IncidentAlert&quot;</code><br><small>Reusable incident alert component.</small></td><td><code>label: string = &quot;Incident&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>IncidentBanner</strong><br><code>data-component=&quot;IncidentBanner&quot;</code><br><small>Reusable incident banner component.</small></td><td><code>label: string = &quot;Incident&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>IncidentSeverityBadge</strong><br><code>data-component=&quot;IncidentSeverityBadge&quot;</code><br><small>Reusable incident severity badge component.</small></td><td><code>label: string = &quot;IncidentSeverity&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>IndustryBadge</strong><br><code>data-component=&quot;IndustryBadge&quot;</code><br><small>Reusable industry badge component.</small></td><td><code>label: string = &quot;Industry&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>InlineAlert</strong><br><code>data-component=&quot;InlineAlert&quot;</code><br><small>Reusable inline alert component.</small></td><td><code>label: string = &quot;Inline&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LegalAcceptanceNotice</strong><br><code>data-component=&quot;LegalAcceptanceNotice&quot;</code><br><small>Reusable legal acceptance notice component.</small></td><td><code>label: string = &quot;LegalAcceptance&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LegalNotice</strong><br><code>data-component=&quot;LegalNotice&quot;</code><br><small>Reusable legal notice component.</small></td><td><code>label: string = &quot;Legal&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LegalVersionBadge</strong><br><code>data-component=&quot;LegalVersionBadge&quot;</code><br><small>Reusable legal version badge component.</small></td><td><code>label: string = &quot;LegalVersion&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MaintenanceAlert</strong><br><code>data-component=&quot;MaintenanceAlert&quot;</code><br><small>Reusable maintenance alert component.</small></td><td><code>label: string = &quot;Maintenance&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MaintenanceBanner</strong><br><code>data-component=&quot;MaintenanceBanner&quot;</code><br><small>Reusable maintenance banner component.</small></td><td><code>label: string = &quot;Maintenance&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MaintenanceState</strong><br><code>data-component=&quot;MaintenanceState&quot;</code><br><small>Reusable maintenance state component.</small></td><td><code>label: string = &quot;Maintenance&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MessageCharacterCounter</strong><br><code>data-component=&quot;MessageCharacterCounter&quot;</code><br><small>Reusable message character counter component.</small></td><td><code>label: string = &quot;MessageCharacter&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>NewBadge</strong><br><code>data-component=&quot;NewBadge&quot;</code><br><small>Reusable new badge component.</small></td><td><code>label: string = &quot;New&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>NoResultsState</strong><br><code>data-component=&quot;NoResultsState&quot;</code><br><small>Reusable no results state component.</small></td><td><code>label: string = &quot;NoResults&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>NotFoundState</strong><br><code>data-component=&quot;NotFoundState&quot;</code><br><small>Reusable not found state component.</small></td><td><code>label: string = &quot;NotFound&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>OfflineState</strong><br><code>data-component=&quot;OfflineState&quot;</code><br><small>Reusable offline state component.</small></td><td><code>label: string = &quot;Offline&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>OnlineIndicator</strong><br><code>data-component=&quot;OnlineIndicator&quot;</code><br><small>Reusable online indicator component.</small></td><td><code>label: string = &quot;Online&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>OptionalIndicator</strong><br><code>data-component=&quot;OptionalIndicator&quot;</code><br><small>Reusable optional indicator component.</small></td><td><code>label: string = &quot;Optional&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PageAlert</strong><br><code>data-component=&quot;PageAlert&quot;</code><br><small>Reusable page alert component.</small></td><td><code>label: string = &quot;Page&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PageSkeleton</strong><br><code>data-component=&quot;PageSkeleton&quot;</code><br><small>Reusable page skeleton component.</small></td><td><code>label: string = &quot;Page&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PreviewBadge</strong><br><code>data-component=&quot;PreviewBadge&quot;</code><br><small>Reusable preview badge component.</small></td><td><code>label: string = &quot;Preview&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PrivacyNotice</strong><br><code>data-component=&quot;PrivacyNotice&quot;</code><br><small>Reusable privacy notice component.</small></td><td><code>label: string = &quot;Privacy&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProductStatusBadge</strong><br><code>data-component=&quot;ProductStatusBadge&quot;</code><br><small>Reusable product status badge component.</small></td><td><code>label: string = &quot;ProductStatus&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RateLimitedState</strong><br><code>data-component=&quot;RateLimitedState&quot;</code><br><small>Reusable rate limited state component.</small></td><td><code>label: string = &quot;RateLimited&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RegionalPrivacyBanner</strong><br><code>data-component=&quot;RegionalPrivacyBanner&quot;</code><br><small>Reusable regional privacy banner component.</small></td><td><code>label: string = &quot;RegionalPrivacy&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RegionUnavailableAlert</strong><br><code>data-component=&quot;RegionUnavailableAlert&quot;</code><br><small>Reusable region unavailable alert component.</small></td><td><code>label: string = &quot;RegionUnavailable&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RegionUnavailableState</strong><br><code>data-component=&quot;RegionUnavailableState&quot;</code><br><small>Reusable region unavailable state component.</small></td><td><code>label: string = &quot;RegionUnavailable&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RequiredIndicator</strong><br><code>data-component=&quot;RequiredIndicator&quot;</code><br><small>Reusable required indicator component.</small></td><td><code>label: string = &quot;Required&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ResourceTypeBadge</strong><br><code>data-component=&quot;ResourceTypeBadge&quot;</code><br><small>Reusable resource type badge component.</small></td><td><code>label: string = &quot;ResourceType&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SearchEmptyState</strong><br><code>data-component=&quot;SearchEmptyState&quot;</code><br><small>Reusable search empty state component.</small></td><td><code>label: string = &quot;SearchEmpty&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SearchLoadingState</strong><br><code>data-component=&quot;SearchLoadingState&quot;</code><br><small>Reusable search loading state component.</small></td><td><code>label: string = &quot;SearchLoading&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SecurityAlert</strong><br><code>data-component=&quot;SecurityAlert&quot;</code><br><small>Reusable security alert component.</small></td><td><code>label: string = &quot;Security&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ServiceStatusBadge</strong><br><code>data-component=&quot;ServiceStatusBadge&quot;</code><br><small>Reusable service status badge component.</small></td><td><code>label: string = &quot;ServiceStatus&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Skeleton</strong><br><code>data-component=&quot;Skeleton&quot;</code><br><small>Reusable skeleton component.</small></td><td><code>height: string = &quot;4&quot;</code><br><code>rounded: string = &quot;lg&quot;</code><br><code>className: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>SmsSegmentCounter</strong><br><code>data-component=&quot;SmsSegmentCounter&quot;</code><br><small>Reusable sms segment counter component.</small></td><td><code>label: string = &quot;SmsSegment&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>StatusBadge</strong><br><code>data-component=&quot;StatusBadge&quot;</code><br><small>Reusable status badge component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>status: string = &quot;operational&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>SuccessState</strong><br><code>data-component=&quot;SuccessState&quot;</code><br><small>Reusable success state component.</small></td><td><code>label: string = &quot;Success&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TableSkeleton</strong><br><code>data-component=&quot;TableSkeleton&quot;</code><br><small>Reusable table skeleton component.</small></td><td><code>label: string = &quot;Table&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TaxNotice</strong><br><code>data-component=&quot;TaxNotice&quot;</code><br><small>Reusable tax notice component.</small></td><td><code>label: string = &quot;Tax&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TextSkeleton</strong><br><code>data-component=&quot;TextSkeleton&quot;</code><br><small>Reusable text skeleton component.</small></td><td><code>label: string = &quot;Text&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TrendIndicator</strong><br><code>data-component=&quot;TrendIndicator&quot;</code><br><small>Reusable trend indicator component.</small></td><td><code>label: string = &quot;Trend&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>UnavailableRegionState</strong><br><code>data-component=&quot;UnavailableRegionState&quot;</code><br><small>Reusable unavailable region state component.</small></td><td><code>label: string = &quot;UnavailableRegion&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>VerifiedBadge</strong><br><code>data-component=&quot;VerifiedBadge&quot;</code><br><small>Reusable verified badge component.</small></td><td><code>label: string = &quot;Verified&quot;</code><br><code>variant: string = &quot;default&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr></tbody></table></div><h3>Forms</h3><div class="table-wrap"><table><thead><tr><th>Component</th><th>Props</th><th>Slots</th><th>Events</th></tr></thead><tbody><tr><td><strong>AddressInput</strong><br><code>data-component=&quot;AddressInput&quot;</code><br><small>Reusable address input component.</small></td><td><code>label: string = &quot;Address&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AmountInput</strong><br><code>data-component=&quot;AmountInput&quot;</code><br><small>Reusable amount input component.</small></td><td><code>label: string = &quot;Amount&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ApartmentInput</strong><br><code>data-component=&quot;ApartmentInput&quot;</code><br><small>Reusable apartment input component.</small></td><td><code>label: string = &quot;Apartment&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ApiKeyInput</strong><br><code>data-component=&quot;ApiKeyInput&quot;</code><br><small>Reusable api key input component.</small></td><td><code>label: string = &quot;ApiKey&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AttachmentPicker</strong><br><code>data-component=&quot;AttachmentPicker&quot;</code><br><small>Reusable attachment picker component.</small></td><td><code>label: string = &quot;Attachment&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AuthenticatorCodeInput</strong><br><code>data-component=&quot;AuthenticatorCodeInput&quot;</code><br><small>Reusable authenticator code input component.</small></td><td><code>label: string = &quot;AuthenticatorCode&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AvatarGroup</strong><br><code>data-component=&quot;AvatarGroup&quot;</code><br><small>Reusable avatar group component.</small></td><td><code>label: string = &quot;Avatar&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>BillingPeriodToggle</strong><br><code>data-component=&quot;BillingPeriodToggle&quot;</code><br><small>Reusable billing period toggle component.</small></td><td><code>label: string = &quot;BillingPeriod&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>BlackoutDatePicker</strong><br><code>data-component=&quot;BlackoutDatePicker&quot;</code><br><small>Reusable blackout date picker component.</small></td><td><code>label: string = &quot;BlackoutDate&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>BorderRadiusPicker</strong><br><code>data-component=&quot;BorderRadiusPicker&quot;</code><br><small>Reusable border radius picker component.</small></td><td><code>label: string = &quot;BorderRadius&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>BrandColorPicker</strong><br><code>data-component=&quot;BrandColorPicker&quot;</code><br><small>Reusable brand color picker component.</small></td><td><code>label: string = &quot;BrandColor&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>BrandSelector</strong><br><code>data-component=&quot;BrandSelector&quot;</code><br><small>Reusable brand selector component.</small></td><td><code>label: string = &quot;Brand&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>BudgetSelector</strong><br><code>data-component=&quot;BudgetSelector&quot;</code><br><small>Reusable budget selector component.</small></td><td><code>label: string = &quot;Budget&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>BusinessHoursPicker</strong><br><code>data-component=&quot;BusinessHoursPicker&quot;</code><br><small>Reusable business hours picker component.</small></td><td><code>label: string = &quot;BusinessHours&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ButtonGroup</strong><br><code>data-component=&quot;ButtonGroup&quot;</code><br><small>Reusable button group component.</small></td><td><code>label: string = &quot;Button&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ButtonSelector</strong><br><code>data-component=&quot;ButtonSelector&quot;</code><br><small>Reusable button selector component.</small></td><td><code>label: string = &quot;Button&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CallbackUrlInput</strong><br><code>data-component=&quot;CallbackUrlInput&quot;</code><br><small>Reusable callback url input component.</small></td><td><code>label: string = &quot;CallbackUrl&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CaptchaField</strong><br><code>data-component=&quot;CaptchaField&quot;</code><br><small>Reusable captcha field component.</small></td><td><code>label: string = &quot;Captcha&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CardSelector</strong><br><code>data-component=&quot;CardSelector&quot;</code><br><small>Reusable card selector component.</small></td><td><code>label: string = &quot;Card&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ChannelSelector</strong><br><code>data-component=&quot;ChannelSelector&quot;</code><br><small>Reusable channel selector component.</small></td><td><code>label: string = &quot;Channel&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CheckboxGroup</strong><br><code>data-component=&quot;CheckboxGroup&quot;</code><br><small>Reusable checkbox group component.</small></td><td><code>label: string = &quot;Checkbox&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ChipInput</strong><br><code>data-component=&quot;ChipInput&quot;</code><br><small>Reusable chip input component.</small></td><td><code>label: string = &quot;Chip&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CitySelector</strong><br><code>data-component=&quot;CitySelector&quot;</code><br><small>Reusable city selector component.</small></td><td><code>label: string = &quot;City&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CodeInput</strong><br><code>data-component=&quot;CodeInput&quot;</code><br><small>Reusable code input component.</small></td><td><code>label: string = &quot;Code&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ColorHexInput</strong><br><code>data-component=&quot;ColorHexInput&quot;</code><br><small>Reusable color hex input component.</small></td><td><code>label: string = &quot;ColorHex&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ColorPicker</strong><br><code>data-component=&quot;ColorPicker&quot;</code><br><small>Reusable color picker component.</small></td><td><code>label: string = &quot;Color&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ColorSelector</strong><br><code>data-component=&quot;ColorSelector&quot;</code><br><small>Reusable color selector component.</small></td><td><code>label: string = &quot;Color&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CommandSearchInput</strong><br><code>data-component=&quot;CommandSearchInput&quot;</code><br><small>Reusable command search input component.</small></td><td><code>label: string = &quot;CommandSearch&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CompanyNameInput</strong><br><code>data-component=&quot;CompanyNameInput&quot;</code><br><small>Reusable company name input component.</small></td><td><code>label: string = &quot;CompanyName&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CompanySizeSelector</strong><br><code>data-component=&quot;CompanySizeSelector&quot;</code><br><small>Reusable company size selector component.</small></td><td><code>label: string = &quot;CompanySize&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ComparisonDateRangePicker</strong><br><code>data-component=&quot;ComparisonDateRangePicker&quot;</code><br><small>Reusable comparison date range picker component.</small></td><td><code>label: string = &quot;ComparisonDateRange&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ConfirmPasswordInput</strong><br><code>data-component=&quot;ConfirmPasswordInput&quot;</code><br><small>Reusable confirm password input component.</small></td><td><code>label: string = &quot;ConfirmPassword&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CookieCategoryToggle</strong><br><code>data-component=&quot;CookieCategoryToggle&quot;</code><br><small>Reusable cookie category toggle component.</small></td><td><code>label: string = &quot;CookieCategory&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CoordinatesInput</strong><br><code>data-component=&quot;CoordinatesInput&quot;</code><br><small>Reusable coordinates input component.</small></td><td><code>label: string = &quot;Coordinates&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CoordinatesPicker</strong><br><code>data-component=&quot;CoordinatesPicker&quot;</code><br><small>Reusable coordinates picker component.</small></td><td><code>label: string = &quot;Coordinates&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CopySecretField</strong><br><code>data-component=&quot;CopySecretField&quot;</code><br><small>Reusable copy secret field component.</small></td><td><code>label: string = &quot;CopySecret&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CountryCallingCodeInput</strong><br><code>data-component=&quot;CountryCallingCodeInput&quot;</code><br><small>Reusable country calling code input component.</small></td><td><code>label: string = &quot;CountryCallingCode&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CountryCallingCodeSelector</strong><br><code>data-component=&quot;CountryCallingCodeSelector&quot;</code><br><small>Reusable country calling code selector component.</small></td><td><code>label: string = &quot;CountryCallingCode&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CountrySelector</strong><br><code>data-component=&quot;CountrySelector&quot;</code><br><small>Reusable country selector component.</small></td><td><code>label: string = &quot;Country&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CouponInput</strong><br><code>data-component=&quot;CouponInput&quot;</code><br><small>Reusable coupon input component.</small></td><td><code>label: string = &quot;Coupon&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CreditAmountInput</strong><br><code>data-component=&quot;CreditAmountInput&quot;</code><br><small>Reusable credit amount input component.</small></td><td><code>label: string = &quot;CreditAmount&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CronInput</strong><br><code>data-component=&quot;CronInput&quot;</code><br><small>Reusable cron input component.</small></td><td><code>label: string = &quot;Cron&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CurrencyInput</strong><br><code>data-component=&quot;CurrencyInput&quot;</code><br><small>Reusable currency input component.</small></td><td><code>label: string = &quot;Currency&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CurrencySelector</strong><br><code>data-component=&quot;CurrencySelector&quot;</code><br><small>Reusable currency selector component.</small></td><td><code>label: string = &quot;Currency&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CurrentPasswordInput</strong><br><code>data-component=&quot;CurrentPasswordInput&quot;</code><br><small>Reusable current password input component.</small></td><td><code>label: string = &quot;CurrentPassword&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DateInput</strong><br><code>data-component=&quot;DateInput&quot;</code><br><small>Reusable date input component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>id: string = &quot;&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>label: string = &quot;Date&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>autocomplete: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>DatePicker</strong><br><code>data-component=&quot;DatePicker&quot;</code><br><small>Reusable date picker component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>id: string = &quot;date&quot;</code><br><code>name: string = &quot;date&quot;</code><br><code>label: string = &quot;Date&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>min: string = &quot;&quot;</code><br><code>max: string = &quot;&quot;</code><br><code>required: boolean = false</code></td><td>None</td><td>None</td></tr><tr><td><strong>DateRangePicker</strong><br><code>data-component=&quot;DateRangePicker&quot;</code><br><small>Reusable date range picker component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>label: string = &quot;Date range&quot;</code><br><code>startName: string = &quot;startDate&quot;</code><br><code>endName: string = &quot;endDate&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>DateTimeInput</strong><br><code>data-component=&quot;DateTimeInput&quot;</code><br><small>Reusable date time input component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>id: string = &quot;&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>label: string = &quot;DateTime&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>autocomplete: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>DateTimePicker</strong><br><code>data-component=&quot;DateTimePicker&quot;</code><br><small>Reusable date time picker component.</small></td><td><code>id: string = &quot;datetime-picker&quot;</code><br><code>name: string = &quot;datetime&quot;</code><br><code>label: string = &quot;Date and time&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>min: string = &quot;&quot;</code><br><code>max: string = &quot;&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>DateTimeRangePicker</strong><br><code>data-component=&quot;DateTimeRangePicker&quot;</code><br><small>Reusable date time range picker component.</small></td><td><code>label: string = &quot;DateTimeRange&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DecimalInput</strong><br><code>data-component=&quot;DecimalInput&quot;</code><br><small>Reusable decimal input component.</small></td><td><code>label: string = &quot;Decimal&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DepartmentInput</strong><br><code>data-component=&quot;DepartmentInput&quot;</code><br><small>Reusable department input component.</small></td><td><code>label: string = &quot;Department&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DiscountInput</strong><br><code>data-component=&quot;DiscountInput&quot;</code><br><small>Reusable discount input component.</small></td><td><code>label: string = &quot;Discount&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DisplayNameInput</strong><br><code>data-component=&quot;DisplayNameInput&quot;</code><br><small>Reusable display name input component.</small></td><td><code>label: string = &quot;DisplayName&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DomainInput</strong><br><code>data-component=&quot;DomainInput&quot;</code><br><small>Reusable domain input component.</small></td><td><code>label: string = &quot;Domain&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DurationInput</strong><br><code>data-component=&quot;DurationInput&quot;</code><br><small>Reusable duration input component.</small></td><td><code>label: string = &quot;Duration&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DurationPicker</strong><br><code>data-component=&quot;DurationPicker&quot;</code><br><small>Reusable duration picker component.</small></td><td><code>label: string = &quot;Duration&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>EmailBodyEditor</strong><br><code>data-component=&quot;EmailBodyEditor&quot;</code><br><small>Reusable email body editor component.</small></td><td><code>label: string = &quot;EmailBody&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>EmailInput</strong><br><code>data-component=&quot;EmailInput&quot;</code><br><small>Reusable email input component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>id: string = &quot;&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>label: string = &quot;Email&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>autocomplete: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>EmojiPicker</strong><br><code>data-component=&quot;EmojiPicker&quot;</code><br><small>Reusable emoji picker component.</small></td><td><code>label: string = &quot;Emoji&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>EnvironmentSelector</strong><br><code>data-component=&quot;EnvironmentSelector&quot;</code><br><small>Reusable environment selector component.</small></td><td><code>label: string = &quot;Environment&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ExpiryDateTimePicker</strong><br><code>data-component=&quot;ExpiryDateTimePicker&quot;</code><br><small>Reusable expiry date time picker component.</small></td><td><code>label: string = &quot;ExpiryDateTime&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FaxInput</strong><br><code>data-component=&quot;FaxInput&quot;</code><br><small>Reusable fax input component.</small></td><td><code>label: string = &quot;Fax&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FileInput</strong><br><code>data-component=&quot;FileInput&quot;</code><br><small>Reusable file input component.</small></td><td><code>label: string = &quot;File&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FileSizeInput</strong><br><code>data-component=&quot;FileSizeInput&quot;</code><br><small>Reusable file size input component.</small></td><td><code>label: string = &quot;FileSize&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FilterSearchInput</strong><br><code>data-component=&quot;FilterSearchInput&quot;</code><br><small>Reusable filter search input component.</small></td><td><code>label: string = &quot;FilterSearch&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FirstNameInput</strong><br><code>data-component=&quot;FirstNameInput&quot;</code><br><small>Reusable first name input component.</small></td><td><code>label: string = &quot;FirstName&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FontPicker</strong><br><code>data-component=&quot;FontPicker&quot;</code><br><small>Reusable font picker component.</small></td><td><code>label: string = &quot;Font&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FontSizePicker</strong><br><code>data-component=&quot;FontSizePicker&quot;</code><br><small>Reusable font size picker component.</small></td><td><code>label: string = &quot;FontSize&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FontWeightPicker</strong><br><code>data-component=&quot;FontWeightPicker&quot;</code><br><small>Reusable font weight picker component.</small></td><td><code>label: string = &quot;FontWeight&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FormField</strong><br><code>data-component=&quot;FormField&quot;</code><br><small>Reusable form field component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>label: string = &quot;Field&quot;</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>required: boolean = false</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FormGroup</strong><br><code>data-component=&quot;FormGroup&quot;</code><br><small>Reusable form group component.</small></td><td><code>label: string = &quot;Form&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>GeofenceEditor</strong><br><code>data-component=&quot;GeofenceEditor&quot;</code><br><small>Reusable geofence editor component.</small></td><td><code>label: string = &quot;Geofence&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>GradientPicker</strong><br><code>data-component=&quot;GradientPicker&quot;</code><br><small>Reusable gradient picker component.</small></td><td><code>label: string = &quot;Gradient&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>GradientStopEditor</strong><br><code>data-component=&quot;GradientStopEditor&quot;</code><br><small>Reusable gradient stop editor component.</small></td><td><code>label: string = &quot;GradientStop&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>HexColorInput</strong><br><code>data-component=&quot;HexColorInput&quot;</code><br><small>Reusable hex color input component.</small></td><td><code>label: string = &quot;HexColor&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>HiddenField</strong><br><code>data-component=&quot;HiddenField&quot;</code><br><small>Reusable hidden field component.</small></td><td><code>label: string = &quot;Hidden&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>HostnameInput</strong><br><code>data-component=&quot;HostnameInput&quot;</code><br><small>Reusable hostname input component.</small></td><td><code>label: string = &quot;Hostname&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>HourPicker</strong><br><code>data-component=&quot;HourPicker&quot;</code><br><small>Reusable hour picker component.</small></td><td><code>label: string = &quot;Hour&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>HslColorInput</strong><br><code>data-component=&quot;HslColorInput&quot;</code><br><small>Reusable hsl color input component.</small></td><td><code>label: string = &quot;HslColor&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>HtmlEditor</strong><br><code>data-component=&quot;HtmlEditor&quot;</code><br><small>Reusable html editor component.</small></td><td><code>label: string = &quot;Html&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>IconPicker</strong><br><code>data-component=&quot;IconPicker&quot;</code><br><small>Reusable icon picker component.</small></td><td><code>label: string = &quot;Icon&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>IconSelector</strong><br><code>data-component=&quot;IconSelector&quot;</code><br><small>Reusable icon selector component.</small></td><td><code>label: string = &quot;Icon&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>IdentifierInput</strong><br><code>data-component=&quot;IdentifierInput&quot;</code><br><small>Reusable identifier input component.</small></td><td><code>label: string = &quot;Identifier&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ImageEditor</strong><br><code>data-component=&quot;ImageEditor&quot;</code><br><small>Reusable image editor component.</small></td><td><code>label: string = &quot;Image&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ImageSelector</strong><br><code>data-component=&quot;ImageSelector&quot;</code><br><small>Reusable image selector component.</small></td><td><code>label: string = &quot;Image&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>IndustrySelector</strong><br><code>data-component=&quot;IndustrySelector&quot;</code><br><small>Reusable industry selector component.</small></td><td><code>label: string = &quot;Industry&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>InputGroup</strong><br><code>data-component=&quot;InputGroup&quot;</code><br><small>Reusable input group component.</small></td><td><code>label: string = &quot;Input&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>IntegerInput</strong><br><code>data-component=&quot;IntegerInput&quot;</code><br><small>Reusable integer input component.</small></td><td><code>label: string = &quot;Integer&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>IpAddressInput</strong><br><code>data-component=&quot;IpAddressInput&quot;</code><br><small>Reusable ip address input component.</small></td><td><code>label: string = &quot;IpAddress&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>JobTitleInput</strong><br><code>data-component=&quot;JobTitleInput&quot;</code><br><small>Reusable job title input component.</small></td><td><code>label: string = &quot;JobTitle&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>JsonInput</strong><br><code>data-component=&quot;JsonInput&quot;</code><br><small>Reusable json input component.</small></td><td><code>label: string = &quot;Json&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LanguageSelector</strong><br><code>data-component=&quot;LanguageSelector&quot;</code><br><small>Reusable language selector component.</small></td><td><code>label: string = &quot;Language&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LastNameInput</strong><br><code>data-component=&quot;LastNameInput&quot;</code><br><small>Reusable last name input component.</small></td><td><code>label: string = &quot;LastName&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LatitudeInput</strong><br><code>data-component=&quot;LatitudeInput&quot;</code><br><small>Reusable latitude input component.</small></td><td><code>label: string = &quot;Latitude&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LegalLanguageSelector</strong><br><code>data-component=&quot;LegalLanguageSelector&quot;</code><br><small>Reusable legal language selector component.</small></td><td><code>label: string = &quot;LegalLanguage&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LegalRegionSelector</strong><br><code>data-component=&quot;LegalRegionSelector&quot;</code><br><small>Reusable legal region selector component.</small></td><td><code>label: string = &quot;LegalRegion&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LetterSpacingPicker</strong><br><code>data-component=&quot;LetterSpacingPicker&quot;</code><br><small>Reusable letter spacing picker component.</small></td><td><code>label: string = &quot;LetterSpacing&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LicenseKeyInput</strong><br><code>data-component=&quot;LicenseKeyInput&quot;</code><br><small>Reusable license key input component.</small></td><td><code>label: string = &quot;LicenseKey&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LineHeightPicker</strong><br><code>data-component=&quot;LineHeightPicker&quot;</code><br><small>Reusable line height picker component.</small></td><td><code>label: string = &quot;LineHeight&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LocaleSelector</strong><br><code>data-component=&quot;LocaleSelector&quot;</code><br><small>Reusable locale selector component.</small></td><td><code>label: string = &quot;Locale&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LocationPicker</strong><br><code>data-component=&quot;LocationPicker&quot;</code><br><small>Reusable location picker component.</small></td><td><code>label: string = &quot;Location&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LongitudeInput</strong><br><code>data-component=&quot;LongitudeInput&quot;</code><br><small>Reusable longitude input component.</small></td><td><code>label: string = &quot;Longitude&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MaintenanceWindowPicker</strong><br><code>data-component=&quot;MaintenanceWindowPicker&quot;</code><br><small>Reusable maintenance window picker component.</small></td><td><code>label: string = &quot;MaintenanceWindow&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MapPicker</strong><br><code>data-component=&quot;MapPicker&quot;</code><br><small>Reusable map picker component.</small></td><td><code>label: string = &quot;Map&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MarkdownEditor</strong><br><code>data-component=&quot;MarkdownEditor&quot;</code><br><small>Reusable markdown editor component.</small></td><td><code>label: string = &quot;Markdown&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MaskedSecretField</strong><br><code>data-component=&quot;MaskedSecretField&quot;</code><br><small>Reusable masked secret field component.</small></td><td><code>label: string = &quot;MaskedSecret&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MentionInput</strong><br><code>data-component=&quot;MentionInput&quot;</code><br><small>Reusable mention input component.</small></td><td><code>label: string = &quot;Mention&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MessageLimitInput</strong><br><code>data-component=&quot;MessageLimitInput&quot;</code><br><small>Reusable message limit input component.</small></td><td><code>label: string = &quot;MessageLimit&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MinutePicker</strong><br><code>data-component=&quot;MinutePicker&quot;</code><br><small>Reusable minute picker component.</small></td><td><code>label: string = &quot;Minute&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MobileInput</strong><br><code>data-component=&quot;MobileInput&quot;</code><br><small>Reusable mobile input component.</small></td><td><code>label: string = &quot;Mobile&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MonthlyVolumeSelector</strong><br><code>data-component=&quot;MonthlyVolumeSelector&quot;</code><br><small>Reusable monthly volume selector component.</small></td><td><code>label: string = &quot;MonthlyVolume&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MonthPicker</strong><br><code>data-component=&quot;MonthPicker&quot;</code><br><small>Reusable month picker component.</small></td><td><code>label: string = &quot;Month&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MonthYearPicker</strong><br><code>data-component=&quot;MonthYearPicker&quot;</code><br><small>Reusable month year picker component.</small></td><td><code>label: string = &quot;MonthYear&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MultipleEmailInput</strong><br><code>data-component=&quot;MultipleEmailInput&quot;</code><br><small>Reusable multiple email input component.</small></td><td><code>label: string = &quot;MultipleEmail&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>NameInput</strong><br><code>data-component=&quot;NameInput&quot;</code><br><small>Reusable name input component.</small></td><td><code>label: string = &quot;Name&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>NewPasswordInput</strong><br><code>data-component=&quot;NewPasswordInput&quot;</code><br><small>Reusable new password input component.</small></td><td><code>label: string = &quot;NewPassword&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>NumberInput</strong><br><code>data-component=&quot;NumberInput&quot;</code><br><small>Reusable number input component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>id: string = &quot;&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>label: string = &quot;Number&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>autocomplete: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>OrganizationSelector</strong><br><code>data-component=&quot;OrganizationSelector&quot;</code><br><small>Reusable organization selector component.</small></td><td><code>label: string = &quot;Organization&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>OtpInput</strong><br><code>data-component=&quot;OtpInput&quot;</code><br><small>Reusable otp input component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>name: string = &quot;otp&quot;</code><br><code>length: number = 6</code><br><code>label: string = &quot;Verification code&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>PasswordInput</strong><br><code>data-component=&quot;PasswordInput&quot;</code><br><small>Reusable password input component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>id: string = &quot;&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>label: string = &quot;Password&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>autocomplete: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>PasswordVisibilityToggle</strong><br><code>data-component=&quot;PasswordVisibilityToggle&quot;</code><br><small>Reusable password visibility toggle component.</small></td><td><code>label: string = &quot;PasswordVisibility&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PathInput</strong><br><code>data-component=&quot;PathInput&quot;</code><br><small>Reusable path input component.</small></td><td><code>label: string = &quot;Path&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PercentageInput</strong><br><code>data-component=&quot;PercentageInput&quot;</code><br><small>Reusable percentage input component.</small></td><td><code>label: string = &quot;Percentage&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PermissionSelector</strong><br><code>data-component=&quot;PermissionSelector&quot;</code><br><small>Reusable permission selector component.</small></td><td><code>label: string = &quot;Permission&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PhoneInput</strong><br><code>data-component=&quot;PhoneInput&quot;</code><br><small>Reusable phone input component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>id: string = &quot;&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>label: string = &quot;Phone&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>autocomplete: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>PinInput</strong><br><code>data-component=&quot;PinInput&quot;</code><br><small>Reusable pin input component.</small></td><td><code>label: string = &quot;Pin&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PlainTextEditor</strong><br><code>data-component=&quot;PlainTextEditor&quot;</code><br><small>Reusable plain text editor component.</small></td><td><code>label: string = &quot;PlainText&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PlanSelector</strong><br><code>data-component=&quot;PlanSelector&quot;</code><br><small>Reusable plan selector component.</small></td><td><code>label: string = &quot;Plan&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PortInput</strong><br><code>data-component=&quot;PortInput&quot;</code><br><small>Reusable port input component.</small></td><td><code>label: string = &quot;Port&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PortNumberInput</strong><br><code>data-component=&quot;PortNumberInput&quot;</code><br><small>Reusable port number input component.</small></td><td><code>label: string = &quot;PortNumber&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PositiveNumberInput</strong><br><code>data-component=&quot;PositiveNumberInput&quot;</code><br><small>Reusable positive number input component.</small></td><td><code>label: string = &quot;PositiveNumber&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PostalCodeInput</strong><br><code>data-component=&quot;PostalCodeInput&quot;</code><br><small>Reusable postal code input component.</small></td><td><code>label: string = &quot;PostalCode&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PresetDateRangePicker</strong><br><code>data-component=&quot;PresetDateRangePicker&quot;</code><br><small>Reusable preset date range picker component.</small></td><td><code>label: string = &quot;PresetDateRange&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PriceInput</strong><br><code>data-component=&quot;PriceInput&quot;</code><br><small>Reusable price input component.</small></td><td><code>label: string = &quot;Price&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PricingFeatureGroup</strong><br><code>data-component=&quot;PricingFeatureGroup&quot;</code><br><small>Reusable pricing feature group component.</small></td><td><code>label: string = &quot;PricingFeature&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PricingToggle</strong><br><code>data-component=&quot;PricingToggle&quot;</code><br><small>Reusable pricing toggle component.</small></td><td><code>label: string = &quot;Pricing&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PrioritySelector</strong><br><code>data-component=&quot;PrioritySelector&quot;</code><br><small>Reusable priority selector component.</small></td><td><code>label: string = &quot;Priority&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProductSelector</strong><br><code>data-component=&quot;ProductSelector&quot;</code><br><small>Reusable product selector component.</small></td><td><code>label: string = &quot;Product&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProjectSelector</strong><br><code>data-component=&quot;ProjectSelector&quot;</code><br><small>Reusable project selector component.</small></td><td><code>label: string = &quot;Project&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PromoCodeInput</strong><br><code>data-component=&quot;PromoCodeInput&quot;</code><br><small>Reusable promo code input component.</small></td><td><code>label: string = &quot;PromoCode&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProviderSelector</strong><br><code>data-component=&quot;ProviderSelector&quot;</code><br><small>Reusable provider selector component.</small></td><td><code>label: string = &quot;Provider&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PublishDateTimePicker</strong><br><code>data-component=&quot;PublishDateTimePicker&quot;</code><br><small>Reusable publish date time picker component.</small></td><td><code>label: string = &quot;PublishDateTime&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PushNotificationEditor</strong><br><code>data-component=&quot;PushNotificationEditor&quot;</code><br><small>Reusable push notification editor component.</small></td><td><code>label: string = &quot;PushNotification&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>QuantityInput</strong><br><code>data-component=&quot;QuantityInput&quot;</code><br><small>Reusable quantity input component.</small></td><td><code>label: string = &quot;Quantity&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>QuietHoursPicker</strong><br><code>data-component=&quot;QuietHoursPicker&quot;</code><br><small>Reusable quiet hours picker component.</small></td><td><code>label: string = &quot;Quiet hours&quot;</code><br><code>startName: string = &quot;quietStart&quot;</code><br><code>endName: string = &quot;quietEnd&quot;</code><br><code>start: string = &quot;22:00&quot;</code><br><code>end: string = &quot;08:00&quot;</code><br><code>timezone: string = &quot;UTC&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>RadioGroup</strong><br><code>data-component=&quot;RadioGroup&quot;</code><br><small>Reusable radio group component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>label: string = &quot;Choose one&quot;</code><br><code>name: string = &quot;choice&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RangeInput</strong><br><code>data-component=&quot;RangeInput&quot;</code><br><small>Reusable range input component.</small></td><td><code>label: string = &quot;Range&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RateLimitInput</strong><br><code>data-component=&quot;RateLimitInput&quot;</code><br><small>Reusable rate limit input component.</small></td><td><code>label: string = &quot;RateLimit&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RecipientSelector</strong><br><code>data-component=&quot;RecipientSelector&quot;</code><br><small>Reusable recipient selector component.</small></td><td><code>label: string = &quot;Recipient&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RecoveryCodeInput</strong><br><code>data-component=&quot;RecoveryCodeInput&quot;</code><br><small>Reusable recovery code input component.</small></td><td><code>label: string = &quot;RecoveryCode&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RecurringSchedulePicker</strong><br><code>data-component=&quot;RecurringSchedulePicker&quot;</code><br><small>Reusable recurring schedule picker component.</small></td><td><code>id: string = &quot;recurring-schedule&quot;</code><br><code>name: string = &quot;recurrence&quot;</code><br><code>label: string = &quot;Repeat&quot;</code><br><code>value: string = &quot;none&quot;</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>RedirectUriInput</strong><br><code>data-component=&quot;RedirectUriInput&quot;</code><br><small>Reusable redirect uri input component.</small></td><td><code>label: string = &quot;RedirectUri&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ReferenceInput</strong><br><code>data-component=&quot;ReferenceInput&quot;</code><br><small>Reusable reference input component.</small></td><td><code>label: string = &quot;Reference&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RegexInput</strong><br><code>data-component=&quot;RegexInput&quot;</code><br><small>Reusable regex input component.</small></td><td><code>label: string = &quot;Regex&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RegionSelector</strong><br><code>data-component=&quot;RegionSelector&quot;</code><br><small>Reusable region selector component.</small></td><td><code>label: string = &quot;Region&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RetryCountInput</strong><br><code>data-component=&quot;RetryCountInput&quot;</code><br><small>Reusable retry count input component.</small></td><td><code>label: string = &quot;RetryCount&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RgbColorInput</strong><br><code>data-component=&quot;RgbColorInput&quot;</code><br><small>Reusable rgb color input component.</small></td><td><code>label: string = &quot;RgbColor&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RichTextEditor</strong><br><code>data-component=&quot;RichTextEditor&quot;</code><br><small>Reusable rich text editor component.</small></td><td><code>label: string = &quot;RichText&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RichTextInput</strong><br><code>data-component=&quot;RichTextInput&quot;</code><br><small>Reusable rich text input component.</small></td><td><code>label: string = &quot;RichText&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RoleSelector</strong><br><code>data-component=&quot;RoleSelector&quot;</code><br><small>Reusable role selector component.</small></td><td><code>label: string = &quot;Role&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RollingDateRangePicker</strong><br><code>data-component=&quot;RollingDateRangePicker&quot;</code><br><small>Reusable rolling date range picker component.</small></td><td><code>label: string = &quot;RollingDateRange&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SavedFilterSelector</strong><br><code>data-component=&quot;SavedFilterSelector&quot;</code><br><small>Reusable saved filter selector component.</small></td><td><code>label: string = &quot;SavedFilter&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ScheduledDateTimePicker</strong><br><code>data-component=&quot;ScheduledDateTimePicker&quot;</code><br><small>Reusable scheduled date time picker component.</small></td><td><code>label: string = &quot;ScheduledDateTime&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ScheduleMessagePicker</strong><br><code>data-component=&quot;ScheduleMessagePicker&quot;</code><br><small>Reusable schedule message picker component.</small></td><td><code>label: string = &quot;ScheduleMessage&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SchedulePicker</strong><br><code>data-component=&quot;SchedulePicker&quot;</code><br><small>Reusable schedule picker component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>label: string = &quot;Schedule&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>SdkLanguageSelector</strong><br><code>data-component=&quot;SdkLanguageSelector&quot;</code><br><small>Reusable sdk language selector component.</small></td><td><code>label: string = &quot;SdkLanguage&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SearchInput</strong><br><code>data-component=&quot;SearchInput&quot;</code><br><small>Reusable search input component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>id: string = &quot;&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>label: string = &quot;Search&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>autocomplete: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>SecondPicker</strong><br><code>data-component=&quot;SecondPicker&quot;</code><br><small>Reusable second picker component.</small></td><td><code>label: string = &quot;Second&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SecretInput</strong><br><code>data-component=&quot;SecretInput&quot;</code><br><small>Reusable secret input component.</small></td><td><code>label: string = &quot;Secret&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SenderIdInput</strong><br><code>data-component=&quot;SenderIdInput&quot;</code><br><small>Reusable sender id input component.</small></td><td><code>label: string = &quot;SenderId&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SeveritySelector</strong><br><code>data-component=&quot;SeveritySelector&quot;</code><br><small>Reusable severity selector component.</small></td><td><code>label: string = &quot;Severity&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ShadowPicker</strong><br><code>data-component=&quot;ShadowPicker&quot;</code><br><small>Reusable shadow picker component.</small></td><td><code>label: string = &quot;Shadow&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SlugInput</strong><br><code>data-component=&quot;SlugInput&quot;</code><br><small>Reusable slug input component.</small></td><td><code>label: string = &quot;Slug&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SmsMessageEditor</strong><br><code>data-component=&quot;SmsMessageEditor&quot;</code><br><small>Reusable sms message editor component.</small></td><td><code>label: string = &quot;SmsMessage&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>StateSelector</strong><br><code>data-component=&quot;StateSelector&quot;</code><br><small>Reusable state selector component.</small></td><td><code>label: string = &quot;State&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>StatusSelector</strong><br><code>data-component=&quot;StatusSelector&quot;</code><br><small>Reusable status selector component.</small></td><td><code>label: string = &quot;Status&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>StepperInput</strong><br><code>data-component=&quot;StepperInput&quot;</code><br><small>Reusable stepper input component.</small></td><td><code>label: string = &quot;Stepper&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>StickerPicker</strong><br><code>data-component=&quot;StickerPicker&quot;</code><br><small>Reusable sticker picker component.</small></td><td><code>label: string = &quot;Sticker&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>StreetAddressInput</strong><br><code>data-component=&quot;StreetAddressInput&quot;</code><br><small>Reusable street address input component.</small></td><td><code>label: string = &quot;StreetAddress&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SubdomainInput</strong><br><code>data-component=&quot;SubdomainInput&quot;</code><br><small>Reusable subdomain input component.</small></td><td><code>label: string = &quot;Subdomain&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SubjectInput</strong><br><code>data-component=&quot;SubjectInput&quot;</code><br><small>Reusable subject input component.</small></td><td><code>label: string = &quot;Subject&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TagInput</strong><br><code>data-component=&quot;TagInput&quot;</code><br><small>Reusable tag input component.</small></td><td><code>label: string = &quot;Tag&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TaxRateInput</strong><br><code>data-component=&quot;TaxRateInput&quot;</code><br><small>Reusable tax rate input component.</small></td><td><code>label: string = &quot;TaxRate&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TeamSizeSelector</strong><br><code>data-component=&quot;TeamSizeSelector&quot;</code><br><small>Reusable team size selector component.</small></td><td><code>label: string = &quot;TeamSize&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TemplateSelector</strong><br><code>data-component=&quot;TemplateSelector&quot;</code><br><small>Reusable template selector component.</small></td><td><code>label: string = &quot;Template&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TemplateVariableInput</strong><br><code>data-component=&quot;TemplateVariableInput&quot;</code><br><small>Reusable template variable input component.</small></td><td><code>label: string = &quot;TemplateVariable&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TextInput</strong><br><code>data-component=&quot;TextInput&quot;</code><br><small>Reusable text input component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>id: string = &quot;&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>label: string = &quot;Text&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>autocomplete: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>ThemeColorPicker</strong><br><code>data-component=&quot;ThemeColorPicker&quot;</code><br><small>Reusable theme color picker component.</small></td><td><code>label: string = &quot;ThemeColor&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TimeInput</strong><br><code>data-component=&quot;TimeInput&quot;</code><br><small>Reusable time input component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>id: string = &quot;&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>label: string = &quot;Time&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>autocomplete: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>TimeoutInput</strong><br><code>data-component=&quot;TimeoutInput&quot;</code><br><small>Reusable timeout input component.</small></td><td><code>label: string = &quot;Timeout&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TimePicker</strong><br><code>data-component=&quot;TimePicker&quot;</code><br><small>Reusable time picker component.</small></td><td><code>id: string = &quot;time-picker&quot;</code><br><code>name: string = &quot;time&quot;</code><br><code>label: string = &quot;Time&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>min: string = &quot;&quot;</code><br><code>max: string = &quot;&quot;</code><br><code>step: number = 60</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>TimeRangePicker</strong><br><code>data-component=&quot;TimeRangePicker&quot;</code><br><small>Reusable time range picker component.</small></td><td><code>label: string = &quot;TimeRange&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TimezoneAwareTimePicker</strong><br><code>data-component=&quot;TimezoneAwareTimePicker&quot;</code><br><small>Reusable timezone aware time picker component.</small></td><td><code>label: string = &quot;TimezoneAwareTime&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TimezoneSelector</strong><br><code>data-component=&quot;TimezoneSelector&quot;</code><br><small>Reusable timezone selector component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>id: string = &quot;timezone&quot;</code><br><code>name: string = &quot;timezone&quot;</code><br><code>label: string = &quot;Timezone&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>Toggle</strong><br><code>data-component=&quot;Toggle&quot;</code><br><small>Reusable toggle component.</small></td><td><code>label: string = &quot;&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ToggleGroup</strong><br><code>data-component=&quot;ToggleGroup&quot;</code><br><small>Reusable toggle group component.</small></td><td><code>label: string = &quot;Toggle&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TokenInput</strong><br><code>data-component=&quot;TokenInput&quot;</code><br><small>Reusable token input component.</small></td><td><code>label: string = &quot;Token&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>UrlInput</strong><br><code>data-component=&quot;UrlInput&quot;</code><br><small>Reusable url input component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>id: string = &quot;&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>label: string = &quot;Url&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>autocomplete: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>UseCaseSelector</strong><br><code>data-component=&quot;UseCaseSelector&quot;</code><br><small>Reusable use case selector component.</small></td><td><code>label: string = &quot;UseCase&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>UsernameInput</strong><br><code>data-component=&quot;UsernameInput&quot;</code><br><small>Reusable username input component.</small></td><td><code>label: string = &quot;Username&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>VerificationCodeInput</strong><br><code>data-component=&quot;VerificationCodeInput&quot;</code><br><small>Reusable verification code input component.</small></td><td><code>label: string = &quot;VerificationCode&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>VersionSelector</strong><br><code>data-component=&quot;VersionSelector&quot;</code><br><small>Reusable version selector component.</small></td><td><code>label: string = &quot;Version&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>VoiceScriptEditor</strong><br><code>data-component=&quot;VoiceScriptEditor&quot;</code><br><small>Reusable voice script editor component.</small></td><td><code>label: string = &quot;VoiceScript&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>VolumeInput</strong><br><code>data-component=&quot;VolumeInput&quot;</code><br><small>Reusable volume input component.</small></td><td><code>label: string = &quot;Volume&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>WebhookUrlInput</strong><br><code>data-component=&quot;WebhookUrlInput&quot;</code><br><small>Reusable webhook url input component.</small></td><td><code>label: string = &quot;WebhookUrl&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>WhatsAppNumberInput</strong><br><code>data-component=&quot;WhatsAppNumberInput&quot;</code><br><small>Reusable whats app number input component.</small></td><td><code>label: string = &quot;WhatsAppNumber&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>WhatsAppTemplateEditor</strong><br><code>data-component=&quot;WhatsAppTemplateEditor&quot;</code><br><small>Reusable whats app template editor component.</small></td><td><code>label: string = &quot;WhatsAppTemplate&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>WorkspaceSelector</strong><br><code>data-component=&quot;WorkspaceSelector&quot;</code><br><small>Reusable workspace selector component.</small></td><td><code>label: string = &quot;Workspace&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>YearPicker</strong><br><code>data-component=&quot;YearPicker&quot;</code><br><small>Reusable year picker component.</small></td><td><code>label: string = &quot;Year&quot;</code><br><code>name: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>placeholder: string = &quot;&quot;</code><br><code>type: string = &quot;text&quot;</code><br><code>required: boolean = false</code><br><code>disabled: boolean = false</code><br><code>readonly: boolean = false</code><br><code>help: string = &quot;&quot;</code><br><code>error: string = &quot;&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr></tbody></table></div><h3>Layout</h3><div class="table-wrap"><table><thead><tr><th>Component</th><th>Props</th><th>Slots</th><th>Events</th></tr></thead><tbody><tr><td><strong>AnchorNavigation</strong><br><code>data-component=&quot;AnchorNavigation&quot;</code><br><small>Reusable anchor navigation component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AppHeader</strong><br><code>data-component=&quot;AppHeader&quot;</code><br><small>Reusable app header component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ArchitectureSection</strong><br><code>data-component=&quot;ArchitectureSection&quot;</code><br><small>Reusable architecture section component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ArticleHero</strong><br><code>data-component=&quot;ArticleHero&quot;</code><br><small>Reusable article hero component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ArticleLayout</strong><br><code>data-component=&quot;ArticleLayout&quot;</code><br><small>Reusable article layout component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ArticlePageShell</strong><br><code>data-component=&quot;ArticlePageShell&quot;</code><br><small>Reusable article page shell component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>BottomNavigation</strong><br><code>data-component=&quot;BottomNavigation&quot;</code><br><small>Reusable bottom navigation component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>BrowserFrame</strong><br><code>data-component=&quot;BrowserFrame&quot;</code><br><small>Reusable browser frame component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CalendarHeader</strong><br><code>data-component=&quot;CalendarHeader&quot;</code><br><small>Reusable calendar header component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CalendarNavigation</strong><br><code>data-component=&quot;CalendarNavigation&quot;</code><br><small>Reusable calendar navigation component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CaseStudyHero</strong><br><code>data-component=&quot;CaseStudyHero&quot;</code><br><small>Reusable case study hero component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CenteredHero</strong><br><code>data-component=&quot;CenteredHero&quot;</code><br><small>Reusable centered hero component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CenteredSectionHeader</strong><br><code>data-component=&quot;CenteredSectionHeader&quot;</code><br><small>Reusable centered section header component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ChallengeSection</strong><br><code>data-component=&quot;ChallengeSection&quot;</code><br><small>Reusable challenge section component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CodeHeader</strong><br><code>data-component=&quot;CodeHeader&quot;</code><br><small>Reusable code header component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CompanyHero</strong><br><code>data-component=&quot;CompanyHero&quot;</code><br><small>Reusable company hero component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CompanyPageShell</strong><br><code>data-component=&quot;CompanyPageShell&quot;</code><br><small>Reusable company page shell component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ContactHero</strong><br><code>data-component=&quot;ContactHero&quot;</code><br><small>Reusable contact hero component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ContactPageShell</strong><br><code>data-component=&quot;ContactPageShell&quot;</code><br><small>Reusable contact page shell component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CTASection</strong><br><code>data-component=&quot;CTASection&quot;</code><br><small>Reusable c t a section component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>eyebrow: string = &quot;Ready?&quot;</code><br><code>title: string = &quot;Start building today&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>primaryLabel: string = &quot;Get started&quot;</code><br><code>primaryHref: string = &quot;#&quot;</code><br><code>secondaryLabel: string = &quot;Contact sales&quot;</code><br><code>secondaryHref: string = &quot;#&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>DesktopNavigation</strong><br><code>data-component=&quot;DesktopNavigation&quot;</code><br><small>Reusable desktop navigation component.</small></td><td><code>label: string = &quot;Primary navigation&quot;</code><br><code>items: string = []</code><br><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>DeveloperHero</strong><br><code>data-component=&quot;DeveloperHero&quot;</code><br><small>Reusable developer hero component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DeveloperPageShell</strong><br><code>data-component=&quot;DeveloperPageShell&quot;</code><br><small>Reusable developer page shell component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DropdownNavigation</strong><br><code>data-component=&quot;DropdownNavigation&quot;</code><br><small>Reusable dropdown navigation component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>EnterpriseHero</strong><br><code>data-component=&quot;EnterpriseHero&quot;</code><br><small>Reusable enterprise hero component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ErrorHero</strong><br><code>data-component=&quot;ErrorHero&quot;</code><br><small>Reusable error hero component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ErrorPageShell</strong><br><code>data-component=&quot;ErrorPageShell&quot;</code><br><small>Reusable error page shell component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FeatureDetailsPanel</strong><br><code>data-component=&quot;FeatureDetailsPanel&quot;</code><br><small>Reusable feature details panel component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FormSection</strong><br><code>data-component=&quot;FormSection&quot;</code><br><small>Reusable form section component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Header</strong><br><code>data-component=&quot;Header&quot;</code><br><small>Reusable header component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Hero</strong><br><code>data-component=&quot;Hero&quot;</code><br><small>Reusable hero component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;Build faster with WRNexusJS&quot;</code><br><code>highlight: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>primaryLabel: string = &quot;Get started&quot;</code><br><code>primaryHref: string = &quot;#&quot;</code><br><code>secondaryLabel: string = &quot;Learn more&quot;</code><br><code>secondaryHref: string = &quot;#&quot;</code><br><code>align: string = &quot;center&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>HeroCodePanel</strong><br><code>data-component=&quot;HeroCodePanel&quot;</code><br><small>Reusable hero code panel component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>InsetPanel</strong><br><code>data-component=&quot;InsetPanel&quot;</code><br><small>Reusable inset panel component.</small></td><td><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LegalDocumentHeader</strong><br><code>data-component=&quot;LegalDocumentHeader&quot;</code><br><small>Reusable legal document header component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LegalDocumentLayout</strong><br><code>data-component=&quot;LegalDocumentLayout&quot;</code><br><small>Reusable legal document layout component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>title: string = &quot;Legal document&quot;</code><br><code>effectiveDate: string = &quot;&quot;</code><br><code>updatedDate: string = &quot;&quot;</code></td><td><code>toc</code><br><code>default</code></td><td>None</td></tr><tr><td><strong>LegalHero</strong><br><code>data-component=&quot;LegalHero&quot;</code><br><small>Reusable legal hero component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LegalPageShell</strong><br><code>data-component=&quot;LegalPageShell&quot;</code><br><small>Reusable legal page shell component.</small></td><td><code>class: string = &quot;&quot;</code></td><td><code>navigation</code><br><code>default</code></td><td>None</td></tr><tr><td><strong>LegalSection</strong><br><code>data-component=&quot;LegalSection&quot;</code><br><small>Reusable legal section component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MarketingPageShell</strong><br><code>data-component=&quot;MarketingPageShell&quot;</code><br><small>Reusable marketing page shell component.</small></td><td><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MarketingSectionHeader</strong><br><code>data-component=&quot;MarketingSectionHeader&quot;</code><br><small>Reusable marketing section header component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MissionSection</strong><br><code>data-component=&quot;MissionSection&quot;</code><br><small>Reusable mission section component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MobileDeviceFrame</strong><br><code>data-component=&quot;MobileDeviceFrame&quot;</code><br><small>Reusable mobile device frame component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MobileNavigation</strong><br><code>data-component=&quot;MobileNavigation&quot;</code><br><small>Reusable mobile navigation component.</small></td><td><code>label: string = &quot;Menu&quot;</code><br><code>closeLabel: string = &quot;Close menu&quot;</code><br><code>items: string = []</code><br><code>class: string = &quot;&quot;</code></td><td>None</td><td><code>click</code></td></tr><tr><td><strong>Navigation</strong><br><code>data-component=&quot;Navigation&quot;</code><br><small>Reusable navigation component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Panel</strong><br><code>data-component=&quot;Panel&quot;</code><br><small>Reusable panel component.</small></td><td><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PreviousNextNavigation</strong><br><code>data-component=&quot;PreviousNextNavigation&quot;</code><br><small>Reusable previous next navigation component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PricingHero</strong><br><code>data-component=&quot;PricingHero&quot;</code><br><small>Reusable pricing hero component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProductCategorySection</strong><br><code>data-component=&quot;ProductCategorySection&quot;</code><br><small>Reusable product category section component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProductHero</strong><br><code>data-component=&quot;ProductHero&quot;</code><br><small>Reusable product hero component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProductPageShell</strong><br><code>data-component=&quot;ProductPageShell&quot;</code><br><small>Reusable product page shell component.</small></td><td><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PublicHeader</strong><br><code>data-component=&quot;PublicHeader&quot;</code><br><small>Reusable public header component.</small></td><td><code>class: string = &quot;&quot;</code></td><td>None</td><td><code>click</code></td></tr><tr><td><strong>PublicPageShell</strong><br><code>data-component=&quot;PublicPageShell&quot;</code><br><small>Reusable public page shell component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ResizablePanel</strong><br><code>data-component=&quot;ResizablePanel&quot;</code><br><small>Reusable resizable panel component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ResourcePageShell</strong><br><code>data-component=&quot;ResourcePageShell&quot;</code><br><small>Reusable resource page shell component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ResultsSection</strong><br><code>data-component=&quot;ResultsSection&quot;</code><br><small>Reusable results section component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ScreenshotFrame</strong><br><code>data-component=&quot;ScreenshotFrame&quot;</code><br><small>Reusable screenshot frame component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Section</strong><br><code>data-component=&quot;Section&quot;</code><br><small>Reusable section component.</small></td><td><code>id: string = &quot;&quot;</code><br><code>size: string = &quot;default&quot;</code><br><code>surface: string = &quot;default&quot;</code><br><code>className: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SectionHeader</strong><br><code>data-component=&quot;SectionHeader&quot;</code><br><small>Reusable section header component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;Section title&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;left&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SecurityHero</strong><br><code>data-component=&quot;SecurityHero&quot;</code><br><small>Reusable security hero component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SidebarLayout</strong><br><code>data-component=&quot;SidebarLayout&quot;</code><br><small>Reusable sidebar layout component.</small></td><td><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SidePanel</strong><br><code>data-component=&quot;SidePanel&quot;</code><br><small>Reusable side panel component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SolutionHero</strong><br><code>data-component=&quot;SolutionHero&quot;</code><br><small>Reusable solution hero component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SolutionPageShell</strong><br><code>data-component=&quot;SolutionPageShell&quot;</code><br><small>Reusable solution page shell component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SolutionSection</strong><br><code>data-component=&quot;SolutionSection&quot;</code><br><small>Reusable solution section component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SplitHero</strong><br><code>data-component=&quot;SplitHero&quot;</code><br><small>Reusable split hero component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SplitLayout</strong><br><code>data-component=&quot;SplitLayout&quot;</code><br><small>Reusable split layout component.</small></td><td><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SplitSectionHeader</strong><br><code>data-component=&quot;SplitSectionHeader&quot;</code><br><small>Reusable split section header component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>StatusPageShell</strong><br><code>data-component=&quot;StatusPageShell&quot;</code><br><small>Reusable status page shell component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>StepNavigation</strong><br><code>data-component=&quot;StepNavigation&quot;</code><br><small>Reusable step navigation component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>StickyLayout</strong><br><code>data-component=&quot;StickyLayout&quot;</code><br><small>Reusable sticky layout component.</small></td><td><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TableHeader</strong><br><code>data-component=&quot;TableHeader&quot;</code><br><small>Reusable table header component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>VisionSection</strong><br><code>data-component=&quot;VisionSection&quot;</code><br><small>Reusable vision section component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>WizardHeader</strong><br><code>data-component=&quot;WizardHeader&quot;</code><br><small>Reusable wizard header component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>WizardNavigation</strong><br><code>data-component=&quot;WizardNavigation&quot;</code><br><small>Reusable wizard navigation component.</small></td><td><code>eyebrow: string = &quot;&quot;</code><br><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>align: string = &quot;start&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr></tbody></table></div><h3>Overlays</h3><div class="table-wrap"><table><thead><tr><th>Component</th><th>Props</th><th>Slots</th><th>Events</th></tr></thead><tbody><tr><td><strong>AccessibleDialog</strong><br><code>data-component=&quot;AccessibleDialog&quot;</code><br><small>Reusable accessible dialog component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AccessibleMenu</strong><br><code>data-component=&quot;AccessibleMenu&quot;</code><br><small>Reusable accessible menu component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AccountMenu</strong><br><code>data-component=&quot;AccountMenu&quot;</code><br><small>Reusable account menu component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ActionMenu</strong><br><code>data-component=&quot;ActionMenu&quot;</code><br><small>Reusable action menu component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>AlertDialog</strong><br><code>data-component=&quot;AlertDialog&quot;</code><br><small>Reusable alert dialog component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ApiKeyCreateDialog</strong><br><code>data-component=&quot;ApiKeyCreateDialog&quot;</code><br><small>Reusable api key create dialog component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CommandMenu</strong><br><code>data-component=&quot;CommandMenu&quot;</code><br><small>Reusable command menu component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ConfirmationDialog</strong><br><code>data-component=&quot;ConfirmationDialog&quot;</code><br><small>Reusable confirmation dialog component.</small></td><td><code>title: string = &quot;Confirm action&quot;</code><br><code>description: string = &quot;Are you sure you want to continue?&quot;</code><br><code>confirmLabel: string = &quot;Confirm&quot;</code><br><code>cancelLabel: string = &quot;Cancel&quot;</code><br><code>danger: boolean = false</code><br><code>open: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>confirm</code></td><td><code>click</code></td></tr><tr><td><strong>ContextMenu</strong><br><code>data-component=&quot;ContextMenu&quot;</code><br><small>Reusable context menu component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CookiePreferencesDialog</strong><br><code>data-component=&quot;CookiePreferencesDialog&quot;</code><br><small>Reusable cookie preferences dialog component.</small></td><td><code>title: string = &quot;Cookie preferences&quot;</code><br><code>description: string = &quot;Choose which optional cookies you allow. Essential cookies are always enabled.&quot;</code><br><code>saveLabel: string = &quot;Save preferences&quot;</code><br><code>acceptLabel: string = &quot;Accept all&quot;</code><br><code>rejectLabel: string = &quot;Reject optional&quot;</code><br><code>open: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td>None</td><td><code>change</code><br><code>click</code></td></tr><tr><td><strong>DeleteConfirmationDialog</strong><br><code>data-component=&quot;DeleteConfirmationDialog&quot;</code><br><small>Reusable delete confirmation dialog component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DevelopersMenu</strong><br><code>data-component=&quot;DevelopersMenu&quot;</code><br><small>Reusable developers menu component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DropdownMenu</strong><br><code>data-component=&quot;DropdownMenu&quot;</code><br><small>Reusable dropdown menu component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>label: string = &quot;Menu&quot;</code></td><td><code>default</code></td><td><code>click</code></td></tr><tr><td><strong>FilterMenu</strong><br><code>data-component=&quot;FilterMenu&quot;</code><br><small>Reusable filter menu component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FormDialog</strong><br><code>data-component=&quot;FormDialog&quot;</code><br><small>Reusable form dialog component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FullscreenDialog</strong><br><code>data-component=&quot;FullscreenDialog&quot;</code><br><small>Reusable fullscreen dialog component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ImagePreviewDialog</strong><br><code>data-component=&quot;ImagePreviewDialog&quot;</code><br><small>Reusable image preview dialog component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Lightbox</strong><br><code>data-component=&quot;Lightbox&quot;</code><br><small>Reusable lightbox component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LogoutDialog</strong><br><code>data-component=&quot;LogoutDialog&quot;</code><br><small>Reusable logout dialog component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>MegaMenu</strong><br><code>data-component=&quot;MegaMenu&quot;</code><br><small>Reusable mega menu component.</small></td><td><code>label: string = &quot;Explore&quot;</code><br><code>sections: string = []</code><br><code>class: string = &quot;&quot;</code></td><td>None</td><td><code>click</code></td></tr><tr><td><strong>NavigationMegaMenu</strong><br><code>data-component=&quot;NavigationMegaMenu&quot;</code><br><small>Reusable navigation mega menu component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Popover</strong><br><code>data-component=&quot;Popover&quot;</code><br><small>Reusable popover component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProductsMegaMenu</strong><br><code>data-component=&quot;ProductsMegaMenu&quot;</code><br><small>Reusable products mega menu component.</small></td><td><code>label: string = &quot;Products&quot;</code><br><code>sections: string = []</code><br><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>PromptDialog</strong><br><code>data-component=&quot;PromptDialog&quot;</code><br><small>Reusable prompt dialog component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ResourcesMegaMenu</strong><br><code>data-component=&quot;ResourcesMegaMenu&quot;</code><br><small>Reusable resources mega menu component.</small></td><td><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>SearchDialog</strong><br><code>data-component=&quot;SearchDialog&quot;</code><br><small>Reusable search dialog component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SecretRevealDialog</strong><br><code>data-component=&quot;SecretRevealDialog&quot;</code><br><small>Reusable secret reveal dialog component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SessionExpiredDialog</strong><br><code>data-component=&quot;SessionExpiredDialog&quot;</code><br><small>Reusable session expired dialog component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SolutionsMegaMenu</strong><br><code>data-component=&quot;SolutionsMegaMenu&quot;</code><br><small>Reusable solutions mega menu component.</small></td><td><code>class: string = &quot;&quot;</code></td><td>None</td><td>None</td></tr><tr><td><strong>StepUpAuthenticationDialog</strong><br><code>data-component=&quot;StepUpAuthenticationDialog&quot;</code><br><small>Reusable step up authentication dialog component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TestMessageDialog</strong><br><code>data-component=&quot;TestMessageDialog&quot;</code><br><small>Reusable test message dialog component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>UnsavedChangesDialog</strong><br><code>data-component=&quot;UnsavedChangesDialog&quot;</code><br><small>Reusable unsaved changes dialog component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>VideoPreviewDialog</strong><br><code>data-component=&quot;VideoPreviewDialog&quot;</code><br><small>Reusable video preview dialog component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>open: boolean = false</code><br><code>closeLabel: string = &quot;Close&quot;</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr></tbody></table></div><h3>Visualization</h3><div class="table-wrap"><table><thead><tr><th>Component</th><th>Props</th><th>Slots</th><th>Events</th></tr></thead><tbody><tr><td><strong>AreaChart</strong><br><code>data-component=&quot;AreaChart&quot;</code><br><small>Reusable area chart component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>BarChart</strong><br><code>data-component=&quot;BarChart&quot;</code><br><small>Reusable bar chart component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CampaignProgress</strong><br><code>data-component=&quot;CampaignProgress&quot;</code><br><small>Reusable campaign progress component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ChannelComparisonChart</strong><br><code>data-component=&quot;ChannelComparisonChart&quot;</code><br><small>Reusable channel comparison chart component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ChannelFallbackDiagram</strong><br><code>data-component=&quot;ChannelFallbackDiagram&quot;</code><br><small>Reusable channel fallback diagram component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ChannelFlow</strong><br><code>data-component=&quot;ChannelFlow&quot;</code><br><small>Reusable channel flow component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ChecklistProgress</strong><br><code>data-component=&quot;ChecklistProgress&quot;</code><br><small>Reusable checklist progress component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CircularProgress</strong><br><code>data-component=&quot;CircularProgress&quot;</code><br><small>Reusable circular progress component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CohortChart</strong><br><code>data-component=&quot;CohortChart&quot;</code><br><small>Reusable cohort chart component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CompletionMeter</strong><br><code>data-component=&quot;CompletionMeter&quot;</code><br><small>Reusable completion meter component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ConversionChart</strong><br><code>data-component=&quot;ConversionChart&quot;</code><br><small>Reusable conversion chart component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>CostBreakdownChart</strong><br><code>data-component=&quot;CostBreakdownChart&quot;</code><br><small>Reusable cost breakdown chart component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DeliveryStatusChart</strong><br><code>data-component=&quot;DeliveryStatusChart&quot;</code><br><small>Reusable delivery status chart component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DeliveryStatusTimeline</strong><br><code>data-component=&quot;DeliveryStatusTimeline&quot;</code><br><small>Reusable delivery status timeline component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>DonutChart</strong><br><code>data-component=&quot;DonutChart&quot;</code><br><small>Reusable donut chart component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>EncryptionDiagram</strong><br><code>data-component=&quot;EncryptionDiagram&quot;</code><br><small>Reusable encryption diagram component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ExportProgress</strong><br><code>data-component=&quot;ExportProgress&quot;</code><br><small>Reusable export progress component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FallbackRouteDiagram</strong><br><code>data-component=&quot;FallbackRouteDiagram&quot;</code><br><small>Reusable fallback route diagram component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FeatureTimeline</strong><br><code>data-component=&quot;FeatureTimeline&quot;</code><br><small>Reusable feature timeline component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FormProgress</strong><br><code>data-component=&quot;FormProgress&quot;</code><br><small>Reusable form progress component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>FunnelChart</strong><br><code>data-component=&quot;FunnelChart&quot;</code><br><small>Reusable funnel chart component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>GeoChart</strong><br><code>data-component=&quot;GeoChart&quot;</code><br><small>Reusable geo chart component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ImportProgress</strong><br><code>data-component=&quot;ImportProgress&quot;</code><br><small>Reusable import progress component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>IncidentResponseFlow</strong><br><code>data-component=&quot;IncidentResponseFlow&quot;</code><br><small>Reusable incident response flow component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>IncidentTimeline</strong><br><code>data-component=&quot;IncidentTimeline&quot;</code><br><small>Reusable incident timeline component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>JobProgress</strong><br><code>data-component=&quot;JobProgress&quot;</code><br><small>Reusable job progress component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LatencyMetric</strong><br><code>data-component=&quot;LatencyMetric&quot;</code><br><small>Reusable latency metric component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>LineChart</strong><br><code>data-component=&quot;LineChart&quot;</code><br><small>Reusable line chart component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Metric</strong><br><code>data-component=&quot;Metric&quot;</code><br><small>Reusable metric component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>OnboardingProgress</strong><br><code>data-component=&quot;OnboardingProgress&quot;</code><br><small>Reusable onboarding progress component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PasswordStrengthMeter</strong><br><code>data-component=&quot;PasswordStrengthMeter&quot;</code><br><small>Reusable password strength meter component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>PieChart</strong><br><code>data-component=&quot;PieChart&quot;</code><br><small>Reusable pie chart component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProductArchitectureDiagram</strong><br><code>data-component=&quot;ProductArchitectureDiagram&quot;</code><br><small>Reusable product architecture diagram component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProgressChart</strong><br><code>data-component=&quot;ProgressChart&quot;</code><br><small>Reusable progress chart component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ProgressRing</strong><br><code>data-component=&quot;ProgressRing&quot;</code><br><small>Reusable progress ring component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>RevenueChart</strong><br><code>data-component=&quot;RevenueChart&quot;</code><br><small>Reusable revenue chart component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>SmartRouteDiagram</strong><br><code>data-component=&quot;SmartRouteDiagram&quot;</code><br><small>Reusable smart route diagram component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TenantIsolationDiagram</strong><br><code>data-component=&quot;TenantIsolationDiagram&quot;</code><br><small>Reusable tenant isolation diagram component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>Timeline</strong><br><code>data-component=&quot;Timeline&quot;</code><br><small>Reusable timeline component.</small></td><td><code>class: string = &quot;&quot;</code><br><code>title: string = &quot;Timeline&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>TimelineChart</strong><br><code>data-component=&quot;TimelineChart&quot;</code><br><small>Reusable timeline chart component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>ToastProgress</strong><br><code>data-component=&quot;ToastProgress&quot;</code><br><small>Reusable toast progress component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>UploadProgress</strong><br><code>data-component=&quot;UploadProgress&quot;</code><br><small>Reusable upload progress component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>UptimeChart</strong><br><code>data-component=&quot;UptimeChart&quot;</code><br><small>Reusable uptime chart component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>UptimeMetric</strong><br><code>data-component=&quot;UptimeMetric&quot;</code><br><small>Reusable uptime metric component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>WebhookFlowDiagram</strong><br><code>data-component=&quot;WebhookFlowDiagram&quot;</code><br><small>Reusable webhook flow diagram component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr><tr><td><strong>WorkflowProgress</strong><br><code>data-component=&quot;WorkflowProgress&quot;</code><br><small>Reusable workflow progress component.</small></td><td><code>title: string = &quot;&quot;</code><br><code>value: string = &quot;&quot;</code><br><code>description: string = &quot;&quot;</code><br><code>summary: string = &quot;&quot;</code><br><code>loading: boolean = false</code><br><code>class: string = &quot;&quot;</code></td><td><code>default</code></td><td>None</td></tr></tbody></table></div></section></article>
-      <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#components">Components</a><a class="toc-level-4" href="#layout">Layout</a><a class="toc-level-4" href="#core-feedback">Core / feedback</a><a class="toc-level-4" href="#additional-controls-data-display">Additional controls &amp; data display</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#ui-css-asset-export">./ui.css asset export</a><a class="toc-level-4" href="#tailwind-and-motion">Tailwind and motion</a><a class="toc-level-4" href="#using-the-selected-theme-in-application-ui">Using the selected theme in application UI</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-4" href="#auto-discovery">Auto-discovery</a><a class="toc-level-4" href="#mounting-components-in-a-page">Mounting components in a page</a><a class="toc-level-3" href="#overrides">Overrides</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a><a class="toc-level-2" href="#components">All UI components</a></nav></aside>
+&lt;/div&gt;</code></pre></article></div></section><section class="prose component-catalog-callout"><h2>Explore the component library</h2><p>The component reference now has a dedicated catalog with searchable cards and one complete page per component.</p><p><a class="primary" href="/components">Browse all 901 components →</a></p></section></article>
+      <aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#components">Components</a><a class="toc-level-4" href="#layout">Layout</a><a class="toc-level-4" href="#core-feedback">Core / feedback</a><a class="toc-level-4" href="#additional-controls-data-display">Additional controls &amp; data display</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#ui-css-asset-export">./ui.css asset export</a><a class="toc-level-4" href="#tailwind-and-motion">Tailwind and motion</a><a class="toc-level-4" href="#using-the-selected-theme-in-application-ui">Using the selected theme in application UI</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-4" href="#auto-discovery">Auto-discovery</a><a class="toc-level-4" href="#mounting-components-in-a-page">Mounting components in a page</a><a class="toc-level-3" href="#overrides">Overrides</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
     </main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
diff --git a/app/pages/packages/uploader.wrn b/app/pages/packages/uploader.wrn
index a11f4264..e9595ccd 100644
--- a/app/pages/packages/uploader.wrn
+++ b/app/pages/packages/uploader.wrn
@@ -9,13 +9,12 @@ page wrnexusuploader {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Data</span><h2>@wrnexus/uploader</h2><p>Validated local/S3 uploads and secure file serving.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Data · Preview</span><h1>@wrnexus/uploader</h1><p>Validated local/S3 uploads and secure file serving.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/uploader@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><p>Config-driven file uploads + serving for <a href="https://www.npmjs.com/org/wrnexus" rel="noreferrer">WRNexusJS</a>. Declare named <strong>storage stores</strong> (local disk or any S3-compatible backend) in <code>wrnexus.config.ts</code>, upload with one function call, drop a drag-and-drop widget on a page, and serve files back — public or private. Zero external dependencies (S3 is signed with a built-in AWS SigV4 implementation, like the rest of the framework).</p>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/uploader</span></nav><section class="doc-intro"><span class="eyebrow">Data · Package reference</span><h1>@wrnexus/uploader</h1><p>Validated local/S3 uploads and secure file serving.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Data</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/uploader@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><p>Config-driven file uploads + serving for <a href="https://www.npmjs.com/org/wrnexus" rel="noreferrer">WRNexusJS</a>. Declare named <strong>storage stores</strong> (local disk or any S3-compatible backend) in <code>wrnexus.config.ts</code>, upload with one function call, drop a drag-and-drop widget on a page, and serve files back — public or private. Zero external dependencies (S3 is signed with a built-in AWS SigV4 implementation, like the rest of the framework).</p>
 <h3 id="usage">Usage</h3>
 <h4 id="configure-local-and-s3-stores">Configure local and S3 stores</h4>
 <pre data-language="ts"><code>// wrnexus.config.ts
@@ -98,7 +97,7 @@ export const GET = serveFromStore(&quot;docs&quot;); // your middleware decides
 <li>SigV4 signing is implemented from scratch (no <code>@aws-sdk</code>); tested against local S3 semantics.</li>
 <p>Live AWS/R2 connectivity depends on your credentials + bucket policy.</p>
 <li>v1 buffers each file in memory up to its size cap (fine for images/docs up to tens of MB).</li>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>import &#123; Context &#125; from '@wrnexus/core';
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>import &#123; Context &#125; from '@wrnexus/core';
 
 /**
  * Storage driver contract + config types.
@@ -373,7 +372,7 @@ declare function accepts(accept: string[] | undefined, file: &#123;
 &#125;): boolean;
 
 export &#123; type LocalStoreConfig, type PutMeta, type S3StoreConfig, type StorageConfig, type StorageDriver, type Store, type StoreAccess, type StoreConfig, type StoredObject, UPLOADS_PREFIX, UPLOAD_JS_HREF, UPLOAD_RUNTIME, UploadError, type UploadOptions, type UploadedFile, accepts, configureStorage, contentTypeOf, encodeKey, extForType, extOf, getStore, handleUpload, hasStorage, localDriver, s3Driver, serveFromStore, serveStoredFile, sha256Hex, signS3, storeNames, storedUrl, upload &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Configure local and S3 stores</h3><pre data-language="ts"><code>// wrnexus.config.ts
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Configure local and S3 stores</h3><pre data-language="ts"><code>// wrnexus.config.ts
 import type &#123; AppConfig &#125; from &quot;@wrnexus/styles&quot;;
 
 const config: AppConfig = &#123;
diff --git a/app/pages/packages/validation.wrn b/app/pages/packages/validation.wrn
index 43a97ec4..6d7dfd05 100644
--- a/app/pages/packages/validation.wrn
+++ b/app/pages/packages/validation.wrn
@@ -9,13 +9,12 @@ page wrnexusvalidation {
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Security</span><h2>@wrnexus/validation</h2><p>Typed schemas, coercion, validation, and browser descriptors.</p><span class="status status-beta">Private preview · 0.2.64</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Security · Preview</span><h1>@wrnexus/validation</h1><p>Typed schemas, coercion, validation, and browser descriptors.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/validation@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>One fluent schema, validated on the server (API bodies, env vars) and mirrored to an eval-free browser validator for forms.</blockquote>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/validation</span></nav><section class="doc-intro"><span class="eyebrow">Security · Package reference</span><h1>@wrnexus/validation</h1><p>Typed schemas, coercion, validation, and browser descriptors.</p><div class="doc-meta"><span>v0.2.64</span><span>Private registry</span><span>Security</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/validation@0.2.64</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide"><blockquote>One fluent schema, validated on the server (API bodies, env vars) and mirrored to an eval-free browser validator for forms.</blockquote>
 <p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
 <h3 id="overview">Overview</h3>
 <p>Define a schema once with the fluent <code>v</code> builder, then reuse it in three places: <code>.parse()</code> runs server-side and returns coerced values plus per-field errors; <code>.describe()</code> emits a plain-JSON <code>SchemaDescriptor</code> that the browser runtime interprets (no <code>eval</code>, no bundled validator); and helpers like <code>parseBody</code> and <code>parseEnv</code> wire schemas straight into API routes and startup config. The server rule logic (<code>applyRule</code>/<code>checkField</code>) and the client runtime (<code>VALIDATE_RUNTIME</code>) mirror each other exactly, so a form validates identically in both places. Schemas are conventionally kept in <code>app/schemas/</code>.</p>
@@ -129,7 +128,7 @@ const head = `&lt;script&gt;$&#123;renderSchemasScript(&#123; signup: signupSche
 <li>Refinements (<code>refine</code>) run only server-side and are never serialized — client and server agree on every other rule because both interpret the same <code>RuleDescriptor</code> list.</li>
 <li>No runtime dependencies. Ships as TypeScript source (<code>src/index.ts</code>) executed directly by Bun.</li>
 <li>Pairs with the WRNexusJS server (<code>@wrnexus/core</code>) for route handlers and the SSR layer that injects <code>renderSchemasScript</code> / <code>VALIDATE_RUNTIME</code>.</li>
-</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>/**
+</ul></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>/**
  * Client-side validation. `renderSchemasScript` bakes the discovered schema
  * descriptors into `window.__wireSchemas`; `VALIDATE_RUNTIME` is a generic,
  * eval-free validator that reads them and validates every `form[data-schema]`
@@ -309,7 +308,7 @@ declare function parseBody&lt;T = Record&lt;string, unknown&gt;&gt;(schema: Obje
 &#125;&gt;;
 
 export &#123; type FieldDescriptor, ObjectSchema, type ParseResult, type RuleDescriptor, type SchemaDescriptor, VALIDATE_RUNTIME, applyRule, checkField, invalid, parseBody, parseEnv, renderSchemasScript, v &#125;;
-</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Define a schema and validate an API body</h3><pre data-language="ts"><code>import &#123; v, parseBody &#125; from &quot;@wrnexus/validation&quot;;
+</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Define a schema and validate an API body</h3><pre data-language="ts"><code>import &#123; v, parseBody &#125; from &quot;@wrnexus/validation&quot;;
 
 export const signupSchema = v.object(&#123;
   email: v.string().required(&quot;Enter your email address&quot;).trim().email(),
diff --git a/app/pages/releases/0.2.64.wrn b/app/pages/releases/0.2.64.wrn
index 8638c700..03e00d35 100644
--- a/app/pages/releases/0.2.64.wrn
+++ b/app/pages/releases/0.2.64.wrn
@@ -7,8 +7,8 @@ page Release0264 {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Releases</span><span aria-hidden="true">/</span><span aria-current="page">Release 0.2.64</span></nav><article class="documentation prose standalone"><h1>WRNexusJS 0.2.64</h1><p>Released 2026-07-13. All 26 installed packages are aligned to this version. Highlights include the new helpers package, reliable workspace app addition, and browser SSO redirects through forward authentication. See the <a href="/changelog">changelog</a>, <a href="/guides/upgrading">upgrade guide</a>, and package references.</p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/roadmap.wrn b/app/pages/roadmap.wrn
index 9fc4937a..f6cd2ea7 100644
--- a/app/pages/roadmap.wrn
+++ b/app/pages/roadmap.wrn
@@ -7,8 +7,8 @@ page Roadmap {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Project</span><span aria-hidden="true">/</span><span aria-current="page">Roadmap</span></nav><article class="documentation prose standalone"><h1>Roadmap</h1><p>Roadmap items are direction, not delivery commitments. Dates require explicit owner approval.</p><h2>Now</h2><ul><li>Private preview onboarding and accurate package references</li><li>Runnable documentation fixtures and link/accessibility checks</li><li>License, support, and disclosure owner decisions</li></ul><h2>Next</h2><ul><li>Durable queue driver guidance</li><li>Expanded database/auth/realtime examples</li><li>Versioned release notes and migration fixtures</li></ul><h2>Later / exploration</h2><ul><li>Historical documentation selector</li><li>Maintained reproducible benchmarks</li><li>Broader mobile/native coverage</li></ul></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/search.wrn b/app/pages/search.wrn
index 5fcb759f..59e1b321 100644
--- a/app/pages/search.wrn
+++ b/app/pages/search.wrn
@@ -7,9 +7,9 @@ page Search {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Discovery</span><span aria-hidden="true">/</span><span aria-current="page">Search</span></nav><article class="documentation prose standalone"><h1>Search documentation</h1><p>This build-time index is local and sends no query to a third party. Use your browser’s find command to filter this compact index.</p><h2>Core documentation</h2><p><a href="/getting-started">Get started</a> · <a href="/packages">Packages</a> · <a href="/language">Language</a> · <a href="/architecture">Architecture</a></p><h2>Guides</h2><p><a href="/guides/project-structure">Project structure</a> · <a href="/guides/routing">Routing</a> · <a href="/guides/pages-and-components">Pages and components</a> · <a href="/guides/server-data">Server data</a> · <a href="/guides/api-routes">API routes</a> · <a href="/guides/middleware">Middleware</a> · <a href="/guides/forms-and-validation">Forms and validation</a> · <a href="/guides/authentication">Authentication</a> · <a href="/guides/authorization">Authorization</a> · <a href="/guides/security">Application security</a> · <a href="/guides/database">Database</a> · <a href="/guides/uploads">Uploads</a> · <a href="/guides/realtime">Realtime</a> · <a href="/guides/pubsub">Pub/sub</a> · <a href="/guides/queues">Queues</a> · <a href="/guides/testing">Testing</a> · <a href="/guides/workspaces-and-gateway">Workspaces and gateway</a> · <a href="/guides/deployment">Deployment</a> · <a href="/guides/configuration-and-profiles">Configuration and profiles</a> · <a href="/guides/i18n-and-themes">Internationalization and themes</a> · <a href="/guides/mobile">Mobile</a> · <a href="/guides/observability">Observability</a> · <a href="/guides/upgrading">Upgrading</a> · <a href="/guides/troubleshooting">Troubleshooting</a></p><h2>Package APIs</h2><p><a href="/packages/ai">@wrnexus/ai</a> · <a href="/packages/authz">@wrnexus/authz</a> · <a href="/packages/compiler">@wrnexus/compiler</a> · <a href="/packages/core">@wrnexus/core</a> · <a href="/packages/csr">@wrnexus/csr</a> · <a href="/packages/db">@wrnexus/db</a> · <a href="/packages/dev-server">@wrnexus/dev-server</a> · <a href="/packages/encryption">@wrnexus/encryption</a> · <a href="/packages/helpers">@wrnexus/helpers</a> · <a href="/packages/i18n">@wrnexus/i18n</a> · <a href="/packages/jwt">@wrnexus/jwt</a> · <a href="/packages/mobile">@wrnexus/mobile</a> · <a href="/packages/native">@wrnexus/native</a> · <a href="/packages/oauth">@wrnexus/oauth</a> · <a href="/packages/pubsub">@wrnexus/pubsub</a> · <a href="/packages/queue">@wrnexus/queue</a> · <a href="/packages/reactive">@wrnexus/reactive</a> · <a href="/packages/router">@wrnexus/router</a> · <a href="/packages/ssr">@wrnexus/ssr</a> · <a href="/packages/styles">@wrnexus/styles</a> · <a href="/packages/test">@wrnexus/test</a> · <a href="/packages/tracking">@wrnexus/tracking</a> · <a href="/packages/ui">@wrnexus/ui</a> · <a href="/packages/uploader">@wrnexus/uploader</a> · <a href="/packages/validation">@wrnexus/validation</a> · <a href="/packages/cli">@wrnexus/cli</a></p></article></main>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Discovery</span><span aria-hidden="true">/</span><span aria-current="page">Search</span></nav><article class="documentation prose standalone"><h1>Search documentation</h1><p>This build-time index is local and sends no query to a third party. Use your browser’s find command to filter this compact index.</p><h2>Core documentation</h2><p><a href="/getting-started">Get started</a> · <a href="/packages">Packages</a> · <a href="/components">Components</a> · <a href="/language">Language</a> · <a href="/architecture">Architecture</a></p><h2>Guides</h2><p><a href="/guides/project-structure">Project structure</a> · <a href="/guides/routing">Routing</a> · <a href="/guides/pages-and-components">Pages and components</a> · <a href="/guides/server-data">Server data</a> · <a href="/guides/api-routes">API routes</a> · <a href="/guides/middleware">Middleware</a> · <a href="/guides/forms-and-validation">Forms and validation</a> · <a href="/guides/authentication">Authentication</a> · <a href="/guides/authorization">Authorization</a> · <a href="/guides/security">Application security</a> · <a href="/guides/database">Database</a> · <a href="/guides/uploads">Uploads</a> · <a href="/guides/realtime">Realtime</a> · <a href="/guides/pubsub">Pub/sub</a> · <a href="/guides/queues">Queues</a> · <a href="/guides/testing">Testing</a> · <a href="/guides/workspaces-and-gateway">Workspaces and gateway</a> · <a href="/guides/deployment">Deployment</a> · <a href="/guides/configuration-and-profiles">Configuration and profiles</a> · <a href="/guides/i18n-and-themes">Internationalization and themes</a> · <a href="/guides/mobile">Mobile</a> · <a href="/guides/observability">Observability</a> · <a href="/guides/upgrading">Upgrading</a> · <a href="/guides/troubleshooting">Troubleshooting</a></p><h2>Package APIs</h2><p><a href="/packages/ai">@wrnexus/ai</a> · <a href="/packages/authz">@wrnexus/authz</a> · <a href="/packages/compiler">@wrnexus/compiler</a> · <a href="/packages/core">@wrnexus/core</a> · <a href="/packages/csr">@wrnexus/csr</a> · <a href="/packages/db">@wrnexus/db</a> · <a href="/packages/dev-server">@wrnexus/dev-server</a> · <a href="/packages/encryption">@wrnexus/encryption</a> · <a href="/packages/helpers">@wrnexus/helpers</a> · <a href="/packages/i18n">@wrnexus/i18n</a> · <a href="/packages/jwt">@wrnexus/jwt</a> · <a href="/packages/mobile">@wrnexus/mobile</a> · <a href="/packages/native">@wrnexus/native</a> · <a href="/packages/oauth">@wrnexus/oauth</a> · <a href="/packages/pubsub">@wrnexus/pubsub</a> · <a href="/packages/queue">@wrnexus/queue</a> · <a href="/packages/reactive">@wrnexus/reactive</a> · <a href="/packages/router">@wrnexus/router</a> · <a href="/packages/ssr">@wrnexus/ssr</a> · <a href="/packages/styles">@wrnexus/styles</a> · <a href="/packages/test">@wrnexus/test</a> · <a href="/packages/tracking">@wrnexus/tracking</a> · <a href="/packages/ui">@wrnexus/ui</a> · <a href="/packages/uploader">@wrnexus/uploader</a> · <a href="/packages/validation">@wrnexus/validation</a> · <a href="/packages/cli">@wrnexus/cli</a></p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
     </div>
diff --git a/app/pages/security.wrn b/app/pages/security.wrn
index 7efe5760..2ae3cc6b 100644
--- a/app/pages/security.wrn
+++ b/app/pages/security.wrn
@@ -7,8 +7,8 @@ page Security {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Trust</span><span aria-hidden="true">/</span><span aria-current="page">Security</span></nav><article class="documentation prose standalone"><h1>Security</h1><p>WRNexusJS provides primitives for CSP, CSRF, Trusted Types, sessions, validation, authorization, encryption, upload restrictions, request limits, and WebSocket-origin checks. Applications remain responsible for correct configuration, business authorization, secrets, dependencies, data protection, and operations.</p><h2>Supported releases</h2><p>Only the current private-preview release 0.2.64 is documented here. A formal old-release support window is not yet published.</p><h2>Report a vulnerability</h2><p>Use WorkRoot’s approved private contact path at <a href="https://workroot.in/">workroot.in</a>. Do not publish exploit details or secrets. Include affected version, impact, reproduction, and a safe contact method. Response targets, encryption key, bounty, audit, and certification are not currently claimed.</p><h2>Deployment controls</h2><p>Use restrictive CSP and permissions policies, HSTS only on HTTPS production origins, MIME sniffing protection, restrictive referrers, explicit CORS, secure cookies, CSRF validation, request limits, and origin checks. See <a href="/guides/security">application security</a>.</p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/showcase.wrn b/app/pages/showcase.wrn
index 3c448f05..3245c7d8 100644
--- a/app/pages/showcase.wrn
+++ b/app/pages/showcase.wrn
@@ -7,8 +7,8 @@ page Showcase {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Project</span><span aria-hidden="true">/</span><span aria-current="page">Showcase</span></nav><article class="documentation prose standalone"><h1>Showcase</h1><p>Only confirmed public properties are listed; no customer or traffic claims are made.</p><div class="feature-grid"><article><h2><a href="https://workroot.in/">WorkRoot</a></h2><p>Creator/company site demonstrating a public WRNexusJS deployment. Exact deployed version and infrastructure notes await owner confirmation.</p></article><article><h2><a href="https://wrnexusjs.dev/">WRNexusJS docs</a></h2><p>This documentation portal, built and verified against WRNexusJS 0.2.64 on Bun.</p></article></div><p>Screenshots are intentionally deferred until approved assets and alt text are available.</p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/support.wrn b/app/pages/support.wrn
index 1efadb40..cf8b49a9 100644
--- a/app/pages/support.wrn
+++ b/app/pages/support.wrn
@@ -7,8 +7,8 @@ page Support {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Trust</span><span aria-hidden="true">/</span><span aria-current="page">Support</span></nav><article class="documentation prose standalone"><h1>Support</h1><p>WRNexusJS has no public Discord, public issue tracker, or guaranteed community support channel listed by this repository. Preview access and support begin through <a href="https://workroot.in/">WorkRoot’s public contact path</a>.</p><p>Include WRNexusJS version, Bun version, OS, a minimal reproduction, expected and actual behavior, and sanitized logs. Never include registry tokens, credentials, session cookies, or private data.</p><p>Support scope, service levels, and commercial terms require owner confirmation.</p></article></main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.2.64</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
       <BackToTop />
diff --git a/app/pages/tutorial.wrn b/app/pages/tutorial.wrn
index 176cf548..2942c34a 100644
--- a/app/pages/tutorial.wrn
+++ b/app/pages/tutorial.wrn
@@ -7,8 +7,8 @@ page Tutorial {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.2.64</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Documentation</span><span aria-hidden="true">/</span><span aria-current="page">Tutorial</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview · runnable-project extraction pending</span><h1>Secure task board</h1><p>This tutorial connects the installed 0.2.64 APIs into one design. Snippets are limited to declarations and README patterns verified in the installed packages; a CI-compiled standalone fixture remains on the roadmap.</p><h2>Application shape</h2><p>A <code>.wrn</code> page renders tasks from an SSR API binding. A shared validation schema protects mutations. Session middleware identifies users, authorization policies gate updates, and a realtime room broadcasts changes.</p><h2>Schema and create route</h2><pre><code>import &#123; v, parseBody &#125; from "@wrnexus/validation";
 const task = v.object(&#123; title: v.string().trim().min(3).max(120) &#125;);
 export const POST = async (ctx) =&gt; &#123;
diff --git a/app/styles/global.css b/app/styles/global.css
index 62719c80..85a7ce7a 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -1,5 +1,151 @@
 @import "tailwindcss";
 @source "../**/*.{wrn,ts,tsx}";
+@source "../../node_modules/@wrnexus/ui/components/*.wrn";
+
+/* Documentation v2: one consistent reading surface for guides, packages,
+   and component references. */
+.docs-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 15rem;
+  gap: clamp(2rem, 5vw, 5rem);
+  align-items: start;
+  padding-top: clamp(1.5rem, 4vw, 3rem);
+}
+.package-document,
+.component-detail-page .documentation {
+  width: 100%;
+  max-width: 840px;
+  margin: 0;
+}
+.doc-intro {
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 2.5rem;
+  padding: clamp(1.5rem, 4vw, 3rem);
+  border: 1px solid var(--border);
+  border-radius: 24px;
+  background: linear-gradient(
+    145deg,
+    var(--surface),
+    color-mix(in srgb, var(--brand) 7%, var(--surface))
+  );
+  box-shadow: var(--shadow);
+}
+.doc-intro::after {
+  position: absolute;
+  top: -7rem;
+  right: -5rem;
+  width: 16rem;
+  height: 16rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--brand) 18%, transparent);
+  filter: blur(45px);
+  content: "";
+  pointer-events: none;
+}
+.doc-meta,
+.component-card-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 1.25rem;
+}
+.doc-meta span,
+.component-card-meta span {
+  padding: 0.35rem 0.65rem;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--muted);
+  background: var(--surface-soft);
+  font-size: 0.74rem;
+  font-weight: 700;
+}
+.component-catalog-page {
+  padding-bottom: 6rem;
+}
+.component-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  padding-top: 1.5rem;
+}
+.component-card {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 250px;
+  flex-direction: column;
+  padding: 1.35rem;
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  color: inherit;
+  background: var(--surface);
+  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.04);
+  text-decoration: none;
+  transition:
+    transform 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+.component-card:hover {
+  transform: translateY(-4px);
+  border-color: color-mix(in srgb, var(--brand) 55%, var(--border));
+  box-shadow: var(--shadow);
+}
+.component-card h2 {
+  margin: 0.85rem 0 0.5rem;
+  overflow-wrap: anywhere;
+  font-size: 1.08rem;
+}
+.component-card p {
+  flex: 1;
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.88rem;
+  line-height: 1.6;
+}
+.component-card .card-link {
+  margin-top: 1.2rem;
+  color: var(--brand-strong);
+  font-size: 0.84rem;
+  font-weight: 800;
+}
+.required {
+  color: #dc2626;
+  font-weight: 800;
+}
+.component-detail-page pre {
+  max-height: 38rem;
+}
+.component-catalog-callout {
+  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
+  border-radius: 20px;
+  padding: 1.5rem;
+  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
+}
+
+@media (max-width: 1080px) {
+  .component-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .docs-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .docs-layout .on-this-page {
+    display: none;
+  }
+}
+@media (max-width: 640px) {
+  .component-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .component-card {
+    min-height: 0;
+  }
+  .doc-intro {
+    border-radius: 18px;
+  }
+}
 
 :root {
   color-scheme: light;
diff --git a/public/llms.txt b/public/llms.txt
index 939f494f..c1cbd38d 100644
--- a/public/llms.txt
+++ b/public/llms.txt
@@ -31834,6 +31834,12628 @@ Props: eyebrow: string = "", title: string = "", description: string = "", href:
 Slots: default
 Events: none
 
+# UI component catalog
+
+The installed @wrnexus/ui release contains 901 documented components. Every mount name, prop type, required/default status, slot, and event is included below and in llms-full.txt.
+
+### AcceptAllCookiesButton
+Mount: data-component="AcceptAllCookiesButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### AccessibleAccordion
+Mount: data-component="AccessibleAccordion"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleCarousel
+Mount: data-component="AccessibleCarousel"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleChartSummary
+Mount: data-component="AccessibleChartSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleDialog
+Mount: data-component="AccessibleDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleErrorSummary
+Mount: data-component="AccessibleErrorSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleIcon
+Mount: data-component="AccessibleIcon"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleMenu
+Mount: data-component="AccessibleMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleTabs
+Mount: data-component="AccessibleTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleTooltip
+Mount: data-component="AccessibleTooltip"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Accordion
+Mount: data-component="Accordion"
+Category: content
+Props: class: string = "", title: string = "Question", open: boolean = false
+Slots: default
+Events: click
+
+### AccountMenu
+Mount: data-component="AccountMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### AccountStatusBanner
+Mount: data-component="AccountStatusBanner"
+Category: feedback
+Props: label: string = "AccountStatus", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ActionMenu
+Mount: data-component="ActionMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### ActiveFilterList
+Mount: data-component="ActiveFilterList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ActivityList
+Mount: data-component="ActivityList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### AddOnCard
+Mount: data-component="AddOnCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AddressInput
+Mount: data-component="AddressInput"
+Category: forms
+Props: label: string = "Address", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AddressPreview
+Mount: data-component="AddressPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AdvancedFilterBuilder
+Mount: data-component="AdvancedFilterBuilder"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Alert
+Mount: data-component="Alert"
+Category: feedback
+Props: class: string = "", title: string = "Notice", description: string = "", variant: string = "info", dismissible: boolean = false
+Slots: default
+Events: click
+
+### AlertDialog
+Mount: data-component="AlertDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### AmountInput
+Mount: data-component="AmountInput"
+Category: forms
+Props: label: string = "Amount", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AnalyticsDashboardPreview
+Mount: data-component="AnalyticsDashboardPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AnchorNavigation
+Mount: data-component="AnchorNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### AnnouncementBar
+Mount: data-component="AnnouncementBar"
+Category: core
+Props: class: string = "", badge: string = "New", message: string = "WrNexus Organizations is now available.", description: string = "Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO.", href: string = "/organizations", actionLabel: string = "Explore organizations", ariaLabel: string = "Announcement"
+Slots: none
+Events: click
+
+### ApartmentInput
+Mount: data-component="ApartmentInput"
+Category: forms
+Props: label: string = "Apartment", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiAuthenticationNotice
+Mount: data-component="ApiAuthenticationNotice"
+Category: feedback
+Props: label: string = "ApiAuthentication", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ApiEndpointCard
+Mount: data-component="ApiEndpointCard"
+Category: content
+Props: class: string = "", method: string = "GET", path: string = "/api/example", description: string = ""
+Slots: default
+Events: none
+
+### ApiErrorExample
+Mount: data-component="ApiErrorExample"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiHeaderTable
+Mount: data-component="ApiHeaderTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ApiKeyCreateDialog
+Mount: data-component="ApiKeyCreateDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### ApiKeyDisplay
+Mount: data-component="ApiKeyDisplay"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiKeyInput
+Mount: data-component="ApiKeyInput"
+Category: forms
+Props: label: string = "ApiKey", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiMethodBadge
+Mount: data-component="ApiMethodBadge"
+Category: feedback
+Props: label: string = "ApiMethod", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ApiParameterTable
+Mount: data-component="ApiParameterTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ApiRateLimitNotice
+Mount: data-component="ApiRateLimitNotice"
+Category: feedback
+Props: label: string = "ApiRateLimit", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ApiRequestExample
+Mount: data-component="ApiRequestExample"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiResponseExample
+Mount: data-component="ApiResponseExample"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiSchemaTable
+Mount: data-component="ApiSchemaTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ApiSchemaViewer
+Mount: data-component="ApiSchemaViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiVersionBadge
+Mount: data-component="ApiVersionBadge"
+Category: feedback
+Props: label: string = "ApiVersion", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### AppHeader
+Mount: data-component="AppHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ArchitectureSection
+Mount: data-component="ArchitectureSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### AreaChart
+Mount: data-component="AreaChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ArticleHero
+Mount: data-component="ArticleHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ArticleLayout
+Mount: data-component="ArticleLayout"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ArticleNewsletterCTA
+Mount: data-component="ArticleNewsletterCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ArticlePageShell
+Mount: data-component="ArticlePageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ArticleShareActions
+Mount: data-component="ArticleShareActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### AspectRatio
+Mount: data-component="AspectRatio"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### AssetCard
+Mount: data-component="AssetCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AttachmentPicker
+Mount: data-component="AttachmentPicker"
+Category: forms
+Props: label: string = "Attachment", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AttachmentUpload
+Mount: data-component="AttachmentUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AudioUpload
+Mount: data-component="AudioUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AuditLogPreview
+Mount: data-component="AuditLogPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AuditTable
+Mount: data-component="AuditTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### AuthenticatorCodeInput
+Mount: data-component="AuthenticatorCodeInput"
+Category: forms
+Props: label: string = "AuthenticatorCode", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AuthorAvatar
+Mount: data-component="AuthorAvatar"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AuthorCard
+Mount: data-component="AuthorCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AuthorizedApplicationCard
+Mount: data-component="AuthorizedApplicationCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AutoGrid
+Mount: data-component="AutoGrid"
+Category: data
+Props: class: string = ""
+Slots: default
+Events: none
+
+### AutomationExampleCard
+Mount: data-component="AutomationExampleCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AvailabilityCalendar
+Mount: data-component="AvailabilityCalendar"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Avatar
+Mount: data-component="Avatar"
+Category: content
+Props: class: string = "", src: string = "", alt: string = "", initials: string = "WR", size: string = "md"
+Slots: none
+Events: none
+
+### AvatarGroup
+Mount: data-component="AvatarGroup"
+Category: forms
+Props: label: string = "Avatar", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AvatarUpload
+Mount: data-component="AvatarUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BackButton
+Mount: data-component="BackButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### BackToTop
+Mount: data-component="BackToTop"
+Category: core
+Props: class: string = "", label: string = "Back to top", assistiveLabel: string = "Return to the top of the page", threshold: number = 500
+Slots: none
+Events: click
+
+### Badge
+Mount: data-component="Badge"
+Category: feedback
+Props: class: string = "", label: string = "Badge", variant: string = "neutral"
+Slots: none
+Events: none
+
+### BankTransferDetails
+Mount: data-component="BankTransferDetails"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Banner
+Mount: data-component="Banner"
+Category: feedback
+Props: class: string = "", text: string = "Announcement", href: string = "", actionLabel: string = "Learn more", variant: string = "brand"
+Slots: none
+Events: none
+
+### BarChart
+Mount: data-component="BarChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### BetaBadge
+Mount: data-component="BetaBadge"
+Category: feedback
+Props: label: string = "Beta", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### BillingAddressForm
+Mount: data-component="BillingAddressForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BillingExample
+Mount: data-component="BillingExample"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BillingPeriodToggle
+Mount: data-component="BillingPeriodToggle"
+Category: forms
+Props: label: string = "BillingPeriod", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BlackoutDatePicker
+Mount: data-component="BlackoutDatePicker"
+Category: forms
+Props: label: string = "BlackoutDate", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BlogCard
+Mount: data-component="BlogCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BlogGrid
+Mount: data-component="BlogGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### BlogList
+Mount: data-component="BlogList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### BlogSearch
+Mount: data-component="BlogSearch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BodyText
+Mount: data-component="BodyText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### BorderRadiusPicker
+Mount: data-component="BorderRadiusPicker"
+Category: forms
+Props: label: string = "BorderRadius", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BottomNavigation
+Mount: data-component="BottomNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### BrandColorPicker
+Mount: data-component="BrandColorPicker"
+Category: forms
+Props: label: string = "BrandColor", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BrandSelector
+Mount: data-component="BrandSelector"
+Category: forms
+Props: label: string = "Brand", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Breadcrumbs
+Mount: data-component="Breadcrumbs"
+Category: core
+Props: class: string = "", items: string = [], centered: boolean = false, compact: boolean = false, showHome: boolean = true, homeLabel: string = "Home", homeHref: string = "/"
+Slots: none
+Events: none
+
+### BrowserFrame
+Mount: data-component="BrowserFrame"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### BudgetRangeSlider
+Mount: data-component="BudgetRangeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BudgetSelector
+Mount: data-component="BudgetSelector"
+Category: forms
+Props: label: string = "Budget", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BusinessHoursPicker
+Mount: data-component="BusinessHoursPicker"
+Category: forms
+Props: label: string = "BusinessHours", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Button
+Mount: data-component="Button"
+Category: actions
+Props: label: string = "Button", type: string = "button", variant: string = "primary", size: string = "md", disabled: boolean = false, loading: boolean = false, icon: string = "", className: string = ""
+Slots: none
+Events: none
+
+### ButtonGroup
+Mount: data-component="ButtonGroup"
+Category: forms
+Props: label: string = "Button", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ButtonSelector
+Mount: data-component="ButtonSelector"
+Category: forms
+Props: label: string = "Button", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Calendar
+Mount: data-component="Calendar"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CalendarGrid
+Mount: data-component="CalendarGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CalendarHeader
+Mount: data-component="CalendarHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CalendarNavigation
+Mount: data-component="CalendarNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CallbackUrlInput
+Mount: data-component="CallbackUrlInput"
+Category: forms
+Props: label: string = "CallbackUrl", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CampaignCard
+Mount: data-component="CampaignCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CampaignPerformancePreview
+Mount: data-component="CampaignPerformancePreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CampaignProgress
+Mount: data-component="CampaignProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CapabilityGrid
+Mount: data-component="CapabilityGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CaptchaField
+Mount: data-component="CaptchaField"
+Category: forms
+Props: label: string = "Captcha", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Card
+Mount: data-component="Card"
+Category: content
+Props: variant: string = "default", padding: string = "md", interactive: boolean = false, className: string = ""
+Slots: default
+Events: none
+
+### CardPaymentForm
+Mount: data-component="CardPaymentForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CardSelector
+Mount: data-component="CardSelector"
+Category: forms
+Props: label: string = "Card", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CardSkeleton
+Mount: data-component="CardSkeleton"
+Category: feedback
+Props: label: string = "Card", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### CareerApplicationForm
+Mount: data-component="CareerApplicationForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CareerBenefitsGrid
+Mount: data-component="CareerBenefitsGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### Carousel
+Mount: data-component="Carousel"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CaseStudyCard
+Mount: data-component="CaseStudyCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CaseStudyHero
+Mount: data-component="CaseStudyHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CaseStudyPreview
+Mount: data-component="CaseStudyPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CenteredCTA
+Mount: data-component="CenteredCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CenteredHero
+Mount: data-component="CenteredHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CenteredSectionHeader
+Mount: data-component="CenteredSectionHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CertificateUpload
+Mount: data-component="CertificateUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CertificationBadge
+Mount: data-component="CertificationBadge"
+Category: feedback
+Props: label: string = "Certification", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ChallengeSection
+Mount: data-component="ChallengeSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ChannelBadge
+Mount: data-component="ChannelBadge"
+Category: feedback
+Props: label: string = "Channel", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ChannelCard
+Mount: data-component="ChannelCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ChannelComparisonChart
+Mount: data-component="ChannelComparisonChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ChannelComparisonTable
+Mount: data-component="ChannelComparisonTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ChannelFallbackDiagram
+Mount: data-component="ChannelFallbackDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ChannelFlow
+Mount: data-component="ChannelFlow"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ChannelIcon
+Mount: data-component="ChannelIcon"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ChannelRateTable
+Mount: data-component="ChannelRateTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ChannelSelector
+Mount: data-component="ChannelSelector"
+Category: forms
+Props: label: string = "Channel", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CharacterCounter
+Mount: data-component="CharacterCounter"
+Category: feedback
+Props: label: string = "Character", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ChartEmptyState
+Mount: data-component="ChartEmptyState"
+Category: feedback
+Props: label: string = "ChartEmpty", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ChartTooltip
+Mount: data-component="ChartTooltip"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Checkbox
+Mount: data-component="Checkbox"
+Category: core
+Props: class: string = "", id: string = "", name: string = "", label: string = "Checkbox", description: string = "", checked: boolean = false, disabled: boolean = false
+Slots: none
+Events: none
+
+### CheckboxGroup
+Mount: data-component="CheckboxGroup"
+Category: forms
+Props: label: string = "Checkbox", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Checklist
+Mount: data-component="Checklist"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ChecklistProgress
+Mount: data-component="ChecklistProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### Chip
+Mount: data-component="Chip"
+Category: core
+Props: label: string = "Chip", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ChipInput
+Mount: data-component="ChipInput"
+Category: forms
+Props: label: string = "Chip", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CircularProgress
+Mount: data-component="CircularProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CitySelector
+Mount: data-component="CitySelector"
+Category: forms
+Props: label: string = "City", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ClearFiltersButton
+Mount: data-component="ClearFiltersButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ClickableCard
+Mount: data-component="ClickableCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CloseButton
+Mount: data-component="CloseButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### Cluster
+Mount: data-component="Cluster"
+Category: core
+Props: gap: string = "4", className: string = ""
+Slots: default
+Events: none
+
+### Code
+Mount: data-component="Code"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CodeBlock
+Mount: data-component="CodeBlock"
+Category: content
+Props: class: string = "", language: string = "text", filename: string = "", code: string = ""
+Slots: none
+Events: click
+
+### CodeCopyButton
+Mount: data-component="CodeCopyButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CodeHeader
+Mount: data-component="CodeHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CodeInput
+Mount: data-component="CodeInput"
+Category: forms
+Props: label: string = "Code", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CodeLanguageBadge
+Mount: data-component="CodeLanguageBadge"
+Category: feedback
+Props: label: string = "CodeLanguage", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### CodeTabs
+Mount: data-component="CodeTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CodeText
+Mount: data-component="CodeText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CohortChart
+Mount: data-component="CohortChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ColorGrid
+Mount: data-component="ColorGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ColorHexInput
+Mount: data-component="ColorHexInput"
+Category: forms
+Props: label: string = "ColorHex", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ColorPicker
+Mount: data-component="ColorPicker"
+Category: forms
+Props: label: string = "Color", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ColorSelector
+Mount: data-component="ColorSelector"
+Category: forms
+Props: label: string = "Color", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ColorSwatch
+Mount: data-component="ColorSwatch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Combobox
+Mount: data-component="Combobox"
+Category: core
+Props: id: string = "combobox", name: string = "", label: string = "Choose an option", placeholder: string = "Search options", options: string = [], required: boolean = false, disabled: boolean = false, class: string = ""
+Slots: none
+Events: none
+
+### ComingSoonBadge
+Mount: data-component="ComingSoonBadge"
+Category: feedback
+Props: label: string = "ComingSoon", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ComingSoonState
+Mount: data-component="ComingSoonState"
+Category: feedback
+Props: label: string = "ComingSoon", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### CommandBlock
+Mount: data-component="CommandBlock"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CommandMenu
+Mount: data-component="CommandMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### CommandSearchInput
+Mount: data-component="CommandSearchInput"
+Category: forms
+Props: label: string = "CommandSearch", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CompanyHero
+Mount: data-component="CompanyHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CompanyNameInput
+Mount: data-component="CompanyNameInput"
+Category: forms
+Props: label: string = "CompanyName", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CompanyPageShell
+Mount: data-component="CompanyPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CompanySizeSelector
+Mount: data-component="CompanySizeSelector"
+Category: forms
+Props: label: string = "CompanySize", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ComparisonDateRangePicker
+Mount: data-component="ComparisonDateRangePicker"
+Category: forms
+Props: label: string = "ComparisonDateRange", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ComparisonTable
+Mount: data-component="ComparisonTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CompletionMeter
+Mount: data-component="CompletionMeter"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ComplianceBadgeList
+Mount: data-component="ComplianceBadgeList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ComplianceProgramCard
+Mount: data-component="ComplianceProgramCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ConfirmationDialog
+Mount: data-component="ConfirmationDialog"
+Category: overlays
+Props: title: string = "Confirm action", description: string = "Are you sure you want to continue?", confirmLabel: string = "Confirm", cancelLabel: string = "Cancel", danger: boolean = false, open: boolean = false, class: string = ""
+Slots: confirm
+Events: click
+
+### ConfirmPasswordInput
+Mount: data-component="ConfirmPasswordInput"
+Category: forms
+Props: label: string = "ConfirmPassword", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ConnectedAccountCard
+Mount: data-component="ConnectedAccountCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ConnectionCard
+Mount: data-component="ConnectionCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ConsentTimelinePreview
+Mount: data-component="ConsentTimelinePreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ContactCard
+Mount: data-component="ContactCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ContactCTA
+Mount: data-component="ContactCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ContactForm
+Mount: data-component="ContactForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ContactHero
+Mount: data-component="ContactHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ContactPageShell
+Mount: data-component="ContactPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ContactSalesBanner
+Mount: data-component="ContactSalesBanner"
+Category: core
+Props: class: string = "", eyebrow: string = "Enterprise identity", title: string = "Ready to secure your next application?", description: string = "", primaryLabel: string = "Contact sales", primaryHref: string = "/contact", secondaryLabel: string = "Start free", secondaryHref: string = "/sign-up", iconClass: string = "icon-[lucide--messages-square]", centered: boolean = false, compact: boolean = false, points: string = [], trustPoints: string = []
+Slots: none
+Events: none
+
+### ContactSalesButton
+Mount: data-component="ContactSalesButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ContactSalesForm
+Mount: data-component="ContactSalesForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Container
+Mount: data-component="Container"
+Category: core
+Props: size: string = "default", className: string = ""
+Slots: default
+Events: none
+
+### ContextMenu
+Mount: data-component="ContextMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### ContextSwitcher
+Mount: data-component="ContextSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ConversationList
+Mount: data-component="ConversationList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ConversationPreview
+Mount: data-component="ConversationPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ConversionChart
+Mount: data-component="ConversionChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CookieBanner
+Mount: data-component="CookieBanner"
+Category: feedback
+Props: class: string = "", title: string = "We use cookies", description: string = "We use essential cookies and optional analytics to improve your experience.", privacyHref: string = "/privacy"
+Slots: none
+Events: click
+
+### CookieCategoryList
+Mount: data-component="CookieCategoryList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CookieCategoryToggle
+Mount: data-component="CookieCategoryToggle"
+Category: forms
+Props: label: string = "CookieCategory", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CookieConsent
+Mount: data-component="CookieConsent"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: click, change
+
+### CookieDetailsTable
+Mount: data-component="CookieDetailsTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CookiePreferencesDialog
+Mount: data-component="CookiePreferencesDialog"
+Category: overlays
+Props: title: string = "Cookie preferences", description: string = "Choose which optional cookies you allow. Essential cookies are always enabled.", saveLabel: string = "Save preferences", acceptLabel: string = "Accept all", rejectLabel: string = "Reject optional", open: boolean = false, class: string = ""
+Slots: none
+Events: change, click
+
+### CookieTable
+Mount: data-component="CookieTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CoordinatesInput
+Mount: data-component="CoordinatesInput"
+Category: forms
+Props: label: string = "Coordinates", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CoordinatesPicker
+Mount: data-component="CoordinatesPicker"
+Category: forms
+Props: label: string = "Coordinates", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CopyButton
+Mount: data-component="CopyButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CopyCodeButton
+Mount: data-component="CopyCodeButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CopySecretField
+Mount: data-component="CopySecretField"
+Category: forms
+Props: label: string = "CopySecret", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CostBreakdownChart
+Mount: data-component="CostBreakdownChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CostSummary
+Mount: data-component="CostSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Counter
+Mount: data-component="Counter"
+Category: feedback
+Props: label: string = "Status", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### CountryCallingCodeInput
+Mount: data-component="CountryCallingCodeInput"
+Category: forms
+Props: label: string = "CountryCallingCode", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CountryCallingCodeSelector
+Mount: data-component="CountryCallingCodeSelector"
+Category: forms
+Props: label: string = "CountryCallingCode", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CountrySelector
+Mount: data-component="CountrySelector"
+Category: forms
+Props: label: string = "Country", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CouponInput
+Mount: data-component="CouponInput"
+Category: forms
+Props: label: string = "Coupon", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CreditAmountInput
+Mount: data-component="CreditAmountInput"
+Category: forms
+Props: label: string = "CreditAmount", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CronBuilder
+Mount: data-component="CronBuilder"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CronInput
+Mount: data-component="CronInput"
+Category: forms
+Props: label: string = "Cron", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CsvUpload
+Mount: data-component="CsvUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CTASection
+Mount: data-component="CTASection"
+Category: layout
+Props: class: string = "", eyebrow: string = "Ready?", title: string = "Start building today", description: string = "", primaryLabel: string = "Get started", primaryHref: string = "#", secondaryLabel: string = "Contact sales", secondaryHref: string = "#"
+Slots: none
+Events: none
+
+### CurrencyInput
+Mount: data-component="CurrencyInput"
+Category: forms
+Props: label: string = "Currency", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CurrencySelector
+Mount: data-component="CurrencySelector"
+Category: forms
+Props: label: string = "Currency", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CurrentPasswordInput
+Mount: data-component="CurrentPasswordInput"
+Category: forms
+Props: label: string = "CurrentPassword", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CustomerLogo
+Mount: data-component="CustomerLogo"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CustomerStoryCard
+Mount: data-component="CustomerStoryCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DangerButton
+Mount: data-component="DangerButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DataProtectionCard
+Mount: data-component="DataProtectionCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DataRetentionTable
+Mount: data-component="DataRetentionTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### DataTable
+Mount: data-component="DataTable"
+Category: data
+Props: caption: string = "Data table", columns: string = [], rows: string = [], emptyMessage: string = "No data available.", striped: boolean = false, class: string = ""
+Slots: none
+Events: none
+
+### DateInput
+Mount: data-component="DateInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "Date", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### DatePicker
+Mount: data-component="DatePicker"
+Category: forms
+Props: class: string = "", id: string = "date", name: string = "date", label: string = "Date", value: string = "", min: string = "", max: string = "", required: boolean = false
+Slots: none
+Events: none
+
+### DateRangeCalendar
+Mount: data-component="DateRangeCalendar"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DateRangePicker
+Mount: data-component="DateRangePicker"
+Category: forms
+Props: class: string = "", label: string = "Date range", startName: string = "startDate", endName: string = "endDate"
+Slots: none
+Events: none
+
+### DateRangeSlider
+Mount: data-component="DateRangeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DateTimeInput
+Mount: data-component="DateTimeInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "DateTime", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### DateTimePicker
+Mount: data-component="DateTimePicker"
+Category: forms
+Props: id: string = "datetime-picker", name: string = "datetime", label: string = "Date and time", value: string = "", min: string = "", max: string = "", required: boolean = false, disabled: boolean = false, class: string = ""
+Slots: none
+Events: none
+
+### DateTimeRangePicker
+Mount: data-component="DateTimeRangePicker"
+Category: forms
+Props: label: string = "DateTimeRange", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DecimalInput
+Mount: data-component="DecimalInput"
+Category: forms
+Props: label: string = "Decimal", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DefinitionList
+Mount: data-component="DefinitionList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### DeleteConfirmationDialog
+Mount: data-component="DeleteConfirmationDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### DeliveryPreview
+Mount: data-component="DeliveryPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DeliveryStatusChart
+Mount: data-component="DeliveryStatusChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DeliveryStatusTimeline
+Mount: data-component="DeliveryStatusTimeline"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DemoRequestForm
+Mount: data-component="DemoRequestForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DepartmentInput
+Mount: data-component="DepartmentInput"
+Category: forms
+Props: label: string = "Department", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DeprecatedFeatureAlert
+Mount: data-component="DeprecatedFeatureAlert"
+Category: feedback
+Props: label: string = "DeprecatedFeature", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### DescriptionList
+Mount: data-component="DescriptionList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### DesktopNavigation
+Mount: data-component="DesktopNavigation"
+Category: layout
+Props: label: string = "Primary navigation", items: string = [], class: string = ""
+Slots: none
+Events: none
+
+### DeveloperCTA
+Mount: data-component="DeveloperCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DeveloperHero
+Mount: data-component="DeveloperHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### DeveloperPageShell
+Mount: data-component="DeveloperPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### DeveloperSearch
+Mount: data-component="DeveloperSearch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DevelopersMegaMenu
+Mount: data-component="DevelopersMegaMenu"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: none
+
+### DevelopersMenu
+Mount: data-component="DevelopersMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### DeviceCard
+Mount: data-component="DeviceCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### disclosure
+Mount: data-component="disclosure"
+Category: core
+Props: summary: string = "Details", class: string = ""
+Slots: default
+Events: none
+
+### DiscountInput
+Mount: data-component="DiscountInput"
+Category: forms
+Props: label: string = "Discount", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DisplayHeading
+Mount: data-component="DisplayHeading"
+Category: core
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### DisplayNameInput
+Mount: data-component="DisplayNameInput"
+Category: forms
+Props: label: string = "DisplayName", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Divider
+Mount: data-component="Divider"
+Category: core
+Props: className: string = ""
+Slots: default
+Events: none
+
+### DocumentPreview
+Mount: data-component="DocumentPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DocumentUpload
+Mount: data-component="DocumentUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DomainInput
+Mount: data-component="DomainInput"
+Category: forms
+Props: label: string = "Domain", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DoNotSellLink
+Mount: data-component="DoNotSellLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DonutChart
+Mount: data-component="DonutChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DownloadAction
+Mount: data-component="DownloadAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DownloadButton
+Mount: data-component="DownloadButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DownloadGateForm
+Mount: data-component="DownloadGateForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DownloadPolicyButton
+Mount: data-component="DownloadPolicyButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DownloadResourceForm
+Mount: data-component="DownloadResourceForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Drawer
+Mount: data-component="Drawer"
+Category: core
+Props: class: string = "", title: string = "Panel", open: boolean = false, side: string = "right"
+Slots: default
+Events: click
+
+### DropdownMenu
+Mount: data-component="DropdownMenu"
+Category: overlays
+Props: class: string = "", label: string = "Menu"
+Slots: default
+Events: click
+
+### DropdownNavigation
+Mount: data-component="DropdownNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### DurationInput
+Mount: data-component="DurationInput"
+Category: forms
+Props: label: string = "Duration", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DurationPicker
+Mount: data-component="DurationPicker"
+Category: forms
+Props: label: string = "Duration", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DurationSlider
+Mount: data-component="DurationSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ElevatedCard
+Mount: data-component="ElevatedCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### EmailBodyEditor
+Mount: data-component="EmailBodyEditor"
+Category: forms
+Props: label: string = "EmailBody", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### EmailComposer
+Mount: data-component="EmailComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### EmailInput
+Mount: data-component="EmailInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "Email", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### EmojiPicker
+Mount: data-component="EmojiPicker"
+Category: forms
+Props: label: string = "Emoji", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### EmptyState
+Mount: data-component="EmptyState"
+Category: feedback
+Props: class: string = "", eyebrow: string = "", title: string = "Nothing found", description: string = "", iconClass: string = "icon-[lucide--inbox]", primaryLabel: string = "", primaryHref: string = "", secondaryLabel: string = "", secondaryHref: string = "", compact: boolean = false, centered: boolean = true, suggestions: string = []
+Slots: none
+Events: none
+
+### EncryptionDiagram
+Mount: data-component="EncryptionDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### EnterpriseCTA
+Mount: data-component="EnterpriseCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### EnterpriseHero
+Mount: data-component="EnterpriseHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### EnterprisePricingCard
+Mount: data-component="EnterprisePricingCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### EnvironmentSelector
+Mount: data-component="EnvironmentSelector"
+Category: forms
+Props: label: string = "Environment", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### EnvironmentSwitcher
+Mount: data-component="EnvironmentSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ErrorActions
+Mount: data-component="ErrorActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ErrorCard
+Mount: data-component="ErrorCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ErrorCode
+Mount: data-component="ErrorCode"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ErrorHero
+Mount: data-component="ErrorHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ErrorIllustration
+Mount: data-component="ErrorIllustration"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ErrorPage
+Mount: data-component="ErrorPage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ErrorPageShell
+Mount: data-component="ErrorPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ErrorState
+Mount: data-component="ErrorState"
+Category: feedback
+Props: class: string = "", type: string = "error", eyebrow: string = "", title: string = "Something went wrong", description: string = "", errorCode: string = "", iconClass: string = "", primaryLabel: string = "", primaryHref: string = "", secondaryLabel: string = "", secondaryHref: string = "", retryLabel: string = "", retryAction: string = "", centered: boolean = true, compact: boolean = false, details: string = []
+Slots: none
+Events: click
+
+### ErrorSupportLink
+Mount: data-component="ErrorSupportLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### EstimatedCostSummary
+Mount: data-component="EstimatedCostSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### EventTable
+Mount: data-component="EventTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ExpandableText
+Mount: data-component="ExpandableText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ExpiryDateTimePicker
+Mount: data-component="ExpiryDateTimePicker"
+Category: forms
+Props: label: string = "ExpiryDateTime", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ExportProgress
+Mount: data-component="ExportProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ExternalLink
+Mount: data-component="ExternalLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### EyebrowText
+Mount: data-component="EyebrowText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### FactorCard
+Mount: data-component="FactorCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FallbackRouteBuilder
+Mount: data-component="FallbackRouteBuilder"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FallbackRouteDiagram
+Mount: data-component="FallbackRouteDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FAQ
+Mount: data-component="FAQ"
+Category: core
+Props: class: string = "", eyebrow: string = "", title: string = "Frequently asked questions", description: string = "", items: string = [], centered: boolean = true, allowMultiple: boolean = false, defaultOpenIndex: number = 0
+Slots: none
+Events: none
+
+### FAQAccordion
+Mount: data-component="FAQAccordion"
+Category: core
+Props: class: string = "", eyebrow: string = "", title: string = "Frequently asked questions", description: string = "", items: string = [], centered: boolean = true, compact: boolean = false, allowMultiple: boolean = false, defaultOpenIndex: number = 0, showContact: boolean = false, contactText: string = "Still have questions?", contactLabel: string = "Contact support", contactHref: string = "/support"
+Slots: none
+Events: click
+
+### FaviconUpload
+Mount: data-component="FaviconUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FaxInput
+Mount: data-component="FaxInput"
+Category: forms
+Props: label: string = "Fax", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FeatureCard
+Mount: data-component="FeatureCard"
+Category: content
+Props: class: string = "", icon: string = "✦", title: string = "Feature", description: string = "", href: string = ""
+Slots: none
+Events: none
+
+### FeatureChecklist
+Mount: data-component="FeatureChecklist"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FeatureComparisonTable
+Mount: data-component="FeatureComparisonTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FeaturedBlogCard
+Mount: data-component="FeaturedBlogCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FeatureDetailsPanel
+Mount: data-component="FeatureDetailsPanel"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### FeatureGrid
+Mount: data-component="FeatureGrid"
+Category: data
+Props: columns: number = 3, className: string = ""
+Slots: default
+Events: none
+
+### FeatureIconCard
+Mount: data-component="FeatureIconCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FeatureList
+Mount: data-component="FeatureList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FeatureTabs
+Mount: data-component="FeatureTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FeatureTimeline
+Mount: data-component="FeatureTimeline"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FeatureUnavailableState
+Mount: data-component="FeatureUnavailableState"
+Category: feedback
+Props: label: string = "FeatureUnavailable", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### FieldActions
+Mount: data-component="FieldActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### file-upload
+Mount: data-component="file-upload"
+Category: core
+Props: store: string = "public", endpoint: string = "/api/upload", accept: string = "", multiple: boolean = false, max: number = 0, label: string = "Drag files here or click to browse", class: string = ""
+Slots: none
+Events: none
+
+### FileInput
+Mount: data-component="FileInput"
+Category: forms
+Props: label: string = "File", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FileList
+Mount: data-component="FileList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FileSizeInput
+Mount: data-component="FileSizeInput"
+Category: forms
+Props: label: string = "FileSize", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FileSizeLabel
+Mount: data-component="FileSizeLabel"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FileTypeBadge
+Mount: data-component="FileTypeBadge"
+Category: feedback
+Props: label: string = "FileType", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### FileUpload
+Mount: data-component="FileUpload"
+Category: content
+Props: class: string = "", id: string = "file", name: string = "file", label: string = "Upload file", accept: string = "", multiple: boolean = false, help: string = "Drag and drop or browse"
+Slots: none
+Events: none
+
+### FilterableTable
+Mount: data-component="FilterableTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FilterBar
+Mount: data-component="FilterBar"
+Category: core
+Props: label: string = "Filters", clearLabel: string = "Clear filters", showClear: boolean = true, class: string = ""
+Slots: default
+Events: none
+
+### FilterMenu
+Mount: data-component="FilterMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### FilterSearchInput
+Mount: data-component="FilterSearchInput"
+Category: forms
+Props: label: string = "FilterSearch", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FinalCTA
+Mount: data-component="FinalCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FirstNameInput
+Mount: data-component="FirstNameInput"
+Category: forms
+Props: label: string = "FirstName", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Flex
+Mount: data-component="Flex"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### FontPicker
+Mount: data-component="FontPicker"
+Category: forms
+Props: label: string = "Font", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FontSizePicker
+Mount: data-component="FontSizePicker"
+Category: forms
+Props: label: string = "FontSize", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FontWeightPicker
+Mount: data-component="FontWeightPicker"
+Category: forms
+Props: label: string = "FontWeight", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FooterLanguageSwitcher
+Mount: data-component="FooterLanguageSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FooterStatusIndicator
+Mount: data-component="FooterStatusIndicator"
+Category: feedback
+Props: label: string = "FooterStatus", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ForbiddenPage
+Mount: data-component="ForbiddenPage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ForbiddenState
+Mount: data-component="ForbiddenState"
+Category: feedback
+Props: label: string = "Forbidden", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ForgotPasswordForm
+Mount: data-component="ForgotPasswordForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Form
+Mount: data-component="Form"
+Category: content
+Props: action: string = "", method: string = "post", name: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FormActions
+Mount: data-component="FormActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FormAlert
+Mount: data-component="FormAlert"
+Category: feedback
+Props: label: string = "Form", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### FormDialog
+Mount: data-component="FormDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### FormError
+Mount: data-component="FormError"
+Category: core
+Props: id: string = "", message: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FormErrorSummary
+Mount: data-component="FormErrorSummary"
+Category: content
+Props: class: string = "", title: string = "Please fix the following", visible: boolean = true
+Slots: default
+Events: none
+
+### FormField
+Mount: data-component="FormField"
+Category: forms
+Props: class: string = "", label: string = "Field", help: string = "", error: string = "", required: boolean = false
+Slots: default
+Events: none
+
+### FormGrid
+Mount: data-component="FormGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FormGroup
+Mount: data-component="FormGroup"
+Category: forms
+Props: label: string = "Form", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FormHelpText
+Mount: data-component="FormHelpText"
+Category: content
+Props: id: string = "", text: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FormLabel
+Mount: data-component="FormLabel"
+Category: content
+Props: for: string = "", label: string = "Label", required: boolean = false, optional: boolean = false, class: string = ""
+Slots: none
+Events: none
+
+### FormProgress
+Mount: data-component="FormProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FormRow
+Mount: data-component="FormRow"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FormSection
+Mount: data-component="FormSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### FullBleed
+Mount: data-component="FullBleed"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### FullscreenDialog
+Mount: data-component="FullscreenDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### FunnelChart
+Mount: data-component="FunnelChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### GeoChart
+Mount: data-component="GeoChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### GeofenceEditor
+Mount: data-component="GeofenceEditor"
+Category: forms
+Props: label: string = "Geofence", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### GhostButton
+Mount: data-component="GhostButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### GlassCard
+Mount: data-component="GlassCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### GlobalSearch
+Mount: data-component="GlobalSearch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### GradientCTA
+Mount: data-component="GradientCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### GradientPicker
+Mount: data-component="GradientPicker"
+Category: forms
+Props: label: string = "Gradient", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### GradientStopEditor
+Mount: data-component="GradientStopEditor"
+Category: forms
+Props: label: string = "GradientStop", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Grid
+Mount: data-component="Grid"
+Category: data
+Props: gap: string = "4", className: string = ""
+Slots: default
+Events: none
+
+### GuideCard
+Mount: data-component="GuideCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### GuideChecklist
+Mount: data-component="GuideChecklist"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### GuideDifficultyBadge
+Mount: data-component="GuideDifficultyBadge"
+Category: feedback
+Props: label: string = "GuideDifficulty", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### GuideGrid
+Mount: data-component="GuideGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### GuideStep
+Mount: data-component="GuideStep"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Header
+Mount: data-component="Header"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### HeaderActions
+Mount: data-component="HeaderActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### HealthIndicator
+Mount: data-component="HealthIndicator"
+Category: feedback
+Props: label: string = "Health", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### Hero
+Mount: data-component="Hero"
+Category: layout
+Props: class: string = "", eyebrow: string = "", title: string = "Build faster with WRNexusJS", highlight: string = "", description: string = "", primaryLabel: string = "Get started", primaryHref: string = "#", secondaryLabel: string = "Learn more", secondaryHref: string = "#", align: string = "center"
+Slots: default
+Events: none
+
+### HeroActions
+Mount: data-component="HeroActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### HeroCodePanel
+Mount: data-component="HeroCodePanel"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### HeroGradientText
+Mount: data-component="HeroGradientText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HeroPrimaryAction
+Mount: data-component="HeroPrimaryAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### HeroProductPreview
+Mount: data-component="HeroProductPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HeroSecondaryAction
+Mount: data-component="HeroSecondaryAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### HeroTrustText
+Mount: data-component="HeroTrustText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HexColorInput
+Mount: data-component="HexColorInput"
+Category: forms
+Props: label: string = "HexColor", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HiddenField
+Mount: data-component="HiddenField"
+Category: forms
+Props: label: string = "Hidden", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HighlightText
+Mount: data-component="HighlightText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HolidayCalendar
+Mount: data-component="HolidayCalendar"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HostnameInput
+Mount: data-component="HostnameInput"
+Category: forms
+Props: label: string = "Hostname", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HourPicker
+Mount: data-component="HourPicker"
+Category: forms
+Props: label: string = "Hour", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HslColorInput
+Mount: data-component="HslColorInput"
+Category: forms
+Props: label: string = "HslColor", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### hstack
+Mount: data-component="hstack"
+Category: core
+Props: gap: string = "4", align: string = "center", class: string = ""
+Slots: default
+Events: none
+
+### HtmlEditor
+Mount: data-component="HtmlEditor"
+Category: forms
+Props: label: string = "Html", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HumanApprovalStep
+Mount: data-component="HumanApprovalStep"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Icon
+Mount: data-component="Icon"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### IconButton
+Mount: data-component="IconButton"
+Category: actions
+Props: class: string = "", label: string = "Action", icon: string = "•", variant: string = "ghost", disabled: boolean = false
+Slots: none
+Events: none
+
+### IconPicker
+Mount: data-component="IconPicker"
+Category: forms
+Props: label: string = "Icon", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### IconSelector
+Mount: data-component="IconSelector"
+Category: forms
+Props: label: string = "Icon", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### IdentifierInput
+Mount: data-component="IdentifierInput"
+Category: forms
+Props: label: string = "Identifier", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Illustration
+Mount: data-component="Illustration"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ImageCompressionPreview
+Mount: data-component="ImageCompressionPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ImageEditor
+Mount: data-component="ImageEditor"
+Category: forms
+Props: label: string = "Image", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ImagePreviewDialog
+Mount: data-component="ImagePreviewDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### ImageSelector
+Mount: data-component="ImageSelector"
+Category: forms
+Props: label: string = "Image", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ImageUpload
+Mount: data-component="ImageUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ImportProgress
+Mount: data-component="ImportProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### IncidentAlert
+Mount: data-component="IncidentAlert"
+Category: feedback
+Props: label: string = "Incident", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### IncidentBanner
+Mount: data-component="IncidentBanner"
+Category: feedback
+Props: label: string = "Incident", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### IncidentCard
+Mount: data-component="IncidentCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### IncidentList
+Mount: data-component="IncidentList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### IncidentResponseFlow
+Mount: data-component="IncidentResponseFlow"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### IncidentSeverityBadge
+Mount: data-component="IncidentSeverityBadge"
+Category: feedback
+Props: label: string = "IncidentSeverity", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### IncidentTimeline
+Mount: data-component="IncidentTimeline"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### IndustryBadge
+Mount: data-component="IndustryBadge"
+Category: feedback
+Props: label: string = "Industry", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### IndustrySelector
+Mount: data-component="IndustrySelector"
+Category: forms
+Props: label: string = "Industry", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### InfoCard
+Mount: data-component="InfoCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Inline
+Mount: data-component="Inline"
+Category: core
+Props: gap: string = "4", className: string = ""
+Slots: default
+Events: none
+
+### InlineAlert
+Mount: data-component="InlineAlert"
+Category: feedback
+Props: label: string = "Inline", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### InlineCode
+Mount: data-component="InlineCode"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### input
+Mount: data-component="input"
+Category: core
+Props: type: string = "text", name: string = "", value: string = "", placeholder: string = "", class: string = ""
+Slots: none
+Events: none
+
+### InputGroup
+Mount: data-component="InputGroup"
+Category: forms
+Props: label: string = "Input", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### InsetPanel
+Mount: data-component="InsetPanel"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### IntegerInput
+Mount: data-component="IntegerInput"
+Category: forms
+Props: label: string = "Integer", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### IntegrationCard
+Mount: data-component="IntegrationCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### InvoiceLineItem
+Mount: data-component="InvoiceLineItem"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### InvoiceSummary
+Mount: data-component="InvoiceSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### IpAddressInput
+Mount: data-component="IpAddressInput"
+Category: forms
+Props: label: string = "IpAddress", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### JobCard
+Mount: data-component="JobCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### JobProgress
+Mount: data-component="JobProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### JobTitleInput
+Mount: data-component="JobTitleInput"
+Category: forms
+Props: label: string = "JobTitle", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### JsonInput
+Mount: data-component="JsonInput"
+Category: forms
+Props: label: string = "Json", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### JsonViewer
+Mount: data-component="JsonViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### KeyValueTable
+Mount: data-component="KeyValueTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### KycDocumentUpload
+Mount: data-component="KycDocumentUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LanguageSelector
+Mount: data-component="LanguageSelector"
+Category: forms
+Props: label: string = "Language", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LanguageSwitcher
+Mount: data-component="LanguageSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LastNameInput
+Mount: data-component="LastNameInput"
+Category: forms
+Props: label: string = "LastName", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LatencyMetric
+Mount: data-component="LatencyMetric"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### LatitudeInput
+Mount: data-component="LatitudeInput"
+Category: forms
+Props: label: string = "Latitude", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LeadershipGrid
+Mount: data-component="LeadershipGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LeadText
+Mount: data-component="LeadText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### LegalAcceptanceNotice
+Mount: data-component="LegalAcceptanceNotice"
+Category: feedback
+Props: label: string = "LegalAcceptance", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### LegalBulletList
+Mount: data-component="LegalBulletList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LegalContactBlock
+Mount: data-component="LegalContactBlock"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LegalDefinitionList
+Mount: data-component="LegalDefinitionList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LegalDocumentHeader
+Mount: data-component="LegalDocumentHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### LegalDocumentLayout
+Mount: data-component="LegalDocumentLayout"
+Category: layout
+Props: class: string = "", title: string = "Legal document", effectiveDate: string = "", updatedDate: string = ""
+Slots: toc, default
+Events: none
+
+### LegalHero
+Mount: data-component="LegalHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### LegalLanguageSelector
+Mount: data-component="LegalLanguageSelector"
+Category: forms
+Props: label: string = "LegalLanguage", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LegalNotice
+Mount: data-component="LegalNotice"
+Category: feedback
+Props: label: string = "Legal", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### LegalPageShell
+Mount: data-component="LegalPageShell"
+Category: layout
+Props: class: string = ""
+Slots: navigation, default
+Events: none
+
+### LegalPrintButton
+Mount: data-component="LegalPrintButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### LegalRegionSelector
+Mount: data-component="LegalRegionSelector"
+Category: forms
+Props: label: string = "LegalRegion", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LegalSection
+Mount: data-component="LegalSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### LegalSummary
+Mount: data-component="LegalSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LegalTable
+Mount: data-component="LegalTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LegalTableOfContents
+Mount: data-component="LegalTableOfContents"
+Category: core
+Props: title: string = "On this page", items: string = [], class: string = ""
+Slots: none
+Events: none
+
+### LegalVersionBadge
+Mount: data-component="LegalVersionBadge"
+Category: feedback
+Props: label: string = "LegalVersion", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### LetterSpacingPicker
+Mount: data-component="LetterSpacingPicker"
+Category: forms
+Props: label: string = "LetterSpacing", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LicenseKeyInput
+Mount: data-component="LicenseKeyInput"
+Category: forms
+Props: label: string = "LicenseKey", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Lightbox
+Mount: data-component="Lightbox"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### LineChart
+Mount: data-component="LineChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### LineHeightPicker
+Mount: data-component="LineHeightPicker"
+Category: forms
+Props: label: string = "LineHeight", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Link
+Mount: data-component="Link"
+Category: core
+Props: href: string = "#", label: string = "Link", external: boolean = false, className: string = ""
+Slots: none
+Events: none
+
+### LinkButton
+Mount: data-component="LinkButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### List
+Mount: data-component="List"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LoadingButton
+Mount: data-component="LoadingButton"
+Category: actions
+Props: label: string = "Continue", loadingLabel: string = "Loading…", loading: boolean = false, disabled: boolean = false, type: string = "button", variant: string = "primary", class: string = ""
+Slots: none
+Events: none
+
+### LocaleSelector
+Mount: data-component="LocaleSelector"
+Category: forms
+Props: label: string = "Locale", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LocalizedRouteLink
+Mount: data-component="LocalizedRouteLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### LocationPicker
+Mount: data-component="LocationPicker"
+Category: forms
+Props: label: string = "Location", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Logo
+Mount: data-component="Logo"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LogoCloud
+Mount: data-component="LogoCloud"
+Category: core
+Props: class: string = "", eyebrow: string = "", title: string = "Trusted by teams building modern products", description: string = "", logos: string = [], centered: boolean = true, compact: boolean = false, variant: string = "strip", grayscale: boolean = true, showNames: boolean = false, maxItems: number = 8
+Slots: none
+Events: none
+
+### LogoUpload
+Mount: data-component="LogoUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LogoutDialog
+Mount: data-component="LogoutDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### LogTable
+Mount: data-component="LogTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LongitudeInput
+Mount: data-component="LongitudeInput"
+Category: forms
+Props: label: string = "Longitude", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MaintenanceAlert
+Mount: data-component="MaintenanceAlert"
+Category: feedback
+Props: label: string = "Maintenance", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### MaintenanceBanner
+Mount: data-component="MaintenanceBanner"
+Category: feedback
+Props: label: string = "Maintenance", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### MaintenanceCard
+Mount: data-component="MaintenanceCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MaintenancePage
+Mount: data-component="MaintenancePage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MaintenanceState
+Mount: data-component="MaintenanceState"
+Category: feedback
+Props: label: string = "Maintenance", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### MaintenanceWindowPicker
+Mount: data-component="MaintenanceWindowPicker"
+Category: forms
+Props: label: string = "MaintenanceWindow", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MapPicker
+Mount: data-component="MapPicker"
+Category: forms
+Props: label: string = "Map", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MarkdownEditor
+Mount: data-component="MarkdownEditor"
+Category: forms
+Props: label: string = "Markdown", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MarketingPageShell
+Mount: data-component="MarketingPageShell"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### MarketingSectionHeader
+Mount: data-component="MarketingSectionHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### MaskedSecretField
+Mount: data-component="MaskedSecretField"
+Category: forms
+Props: label: string = "MaskedSecret", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MegaMenu
+Mount: data-component="MegaMenu"
+Category: overlays
+Props: label: string = "Explore", sections: string = [], class: string = ""
+Slots: none
+Events: click
+
+### MemberList
+Mount: data-component="MemberList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### MentionInput
+Mount: data-component="MentionInput"
+Category: forms
+Props: label: string = "Mention", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MessageCharacterCounter
+Mount: data-component="MessageCharacterCounter"
+Category: feedback
+Props: label: string = "MessageCharacter", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### MessageComposer
+Mount: data-component="MessageComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MessageComposerPreview
+Mount: data-component="MessageComposerPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MessageLimitInput
+Mount: data-component="MessageLimitInput"
+Category: forms
+Props: label: string = "MessageLimit", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MessagePreview
+Mount: data-component="MessagePreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MessageVolumeSlider
+Mount: data-component="MessageVolumeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Metric
+Mount: data-component="Metric"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### MetricCard
+Mount: data-component="MetricCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MetricGrid
+Mount: data-component="MetricGrid"
+Category: data
+Props: label: string = "Key metrics", metrics: string = [], class: string = ""
+Slots: none
+Events: none
+
+### MetricText
+Mount: data-component="MetricText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### MinutePicker
+Mount: data-component="MinutePicker"
+Category: forms
+Props: label: string = "Minute", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MissionSection
+Mount: data-component="MissionSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### MobileDeviceFrame
+Mount: data-component="MobileDeviceFrame"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### MobileInput
+Mount: data-component="MobileInput"
+Category: forms
+Props: label: string = "Mobile", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MobileMenuButton
+Mount: data-component="MobileMenuButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### MobileNavigation
+Mount: data-component="MobileNavigation"
+Category: layout
+Props: label: string = "Menu", closeLabel: string = "Close menu", items: string = [], class: string = ""
+Slots: none
+Events: click
+
+### MobileTableCard
+Mount: data-component="MobileTableCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Modal
+Mount: data-component="Modal"
+Category: core
+Props: class: string = "", title: string = "Dialog", description: string = "", open: boolean = false, size: string = "md", closeLabel: string = "Close"
+Slots: default
+Events: click
+
+### MonthlyVolumeSelector
+Mount: data-component="MonthlyVolumeSelector"
+Category: forms
+Props: label: string = "MonthlyVolume", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MonthPicker
+Mount: data-component="MonthPicker"
+Category: forms
+Props: label: string = "Month", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MonthYearPicker
+Mount: data-component="MonthYearPicker"
+Category: forms
+Props: label: string = "MonthYear", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MultiFileUpload
+Mount: data-component="MultiFileUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MultipleEmailInput
+Mount: data-component="MultipleEmailInput"
+Category: forms
+Props: label: string = "MultipleEmail", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MultiSelect
+Mount: data-component="MultiSelect"
+Category: core
+Props: id: string = "multi-select", name: string = "", label: string = "Choose options", options: string = [], required: boolean = false, disabled: boolean = false, size: number = 5, class: string = ""
+Slots: none
+Events: none
+
+### MutedText
+Mount: data-component="MutedText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### NameInput
+Mount: data-component="NameInput"
+Category: forms
+Props: label: string = "Name", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### NarrowContainer
+Mount: data-component="NarrowContainer"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### Navigation
+Mount: data-component="Navigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### NavigationItem
+Mount: data-component="NavigationItem"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### NavigationMegaMenu
+Mount: data-component="NavigationMegaMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### NewBadge
+Mount: data-component="NewBadge"
+Category: feedback
+Props: label: string = "New", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### NewPasswordInput
+Mount: data-component="NewPasswordInput"
+Category: forms
+Props: label: string = "NewPassword", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### NewsletterCTA
+Mount: data-component="NewsletterCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### NewsletterForm
+Mount: data-component="NewsletterForm"
+Category: content
+Props: class: string = "", eyebrow: string = "", title: string = "Stay up to date", description: string = "", placeholder: string = "Enter your email", buttonLabel: string = "Subscribe", action: string = "/newsletter/subscribe", method: string = "post", emailName: string = "email", privacyLabel: string = "", privacyHref: string = "/privacy", successMessage: string = "You are subscribed.", errorMessage: string = "Something went wrong. Please try again.", iconClass: string = "icon-[lucide--mail]", centered: boolean = false, compact: boolean = false, showIcon: boolean = true, showPrivacy: boolean = true, fullWidth: boolean = false
+Slots: none
+Events: submit, input
+
+### NoResultsState
+Mount: data-component="NoResultsState"
+Category: feedback
+Props: label: string = "NoResults", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### NotFoundPage
+Mount: data-component="NotFoundPage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### NotFoundState
+Mount: data-component="NotFoundState"
+Category: feedback
+Props: label: string = "NotFound", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### NotificationCard
+Mount: data-component="NotificationCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### NotificationDot
+Mount: data-component="NotificationDot"
+Category: core
+Props: label: string = "Notification", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### NotificationList
+Mount: data-component="NotificationList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### NumberInput
+Mount: data-component="NumberInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "Number", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### OfficeCard
+Mount: data-component="OfficeCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### OfflinePage
+Mount: data-component="OfflinePage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### OfflineState
+Mount: data-component="OfflineState"
+Category: feedback
+Props: label: string = "Offline", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### OnboardingProgress
+Mount: data-component="OnboardingProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### OneTimeSecretDisplay
+Mount: data-component="OneTimeSecretDisplay"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### OnlineIndicator
+Mount: data-component="OnlineIndicator"
+Category: feedback
+Props: label: string = "Online", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### OpacitySlider
+Mount: data-component="OpacitySlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### OpenAPICTA
+Mount: data-component="OpenAPICTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### OptionalIndicator
+Mount: data-component="OptionalIndicator"
+Category: feedback
+Props: label: string = "Optional", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### OrganizationSelector
+Mount: data-component="OrganizationSelector"
+Category: forms
+Props: label: string = "Organization", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### OtpInput
+Mount: data-component="OtpInput"
+Category: forms
+Props: class: string = "", name: string = "otp", length: number = 6, label: string = "Verification code"
+Slots: none
+Events: none
+
+### OtpVerificationForm
+Mount: data-component="OtpVerificationForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### OutlinedCard
+Mount: data-component="OutlinedCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PageAlert
+Mount: data-component="PageAlert"
+Category: feedback
+Props: label: string = "Page", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### PageHeader
+Mount: data-component="PageHeader"
+Category: core
+Props: class: string = "", eyebrow: string = "", title: string = "", description: string = "", primaryLabel: string = "", primaryHref: string = "", secondaryLabel: string = "", secondaryHref: string = "", icon: string = "sparkles", centered: boolean = false, compact: boolean = false, showBreadcrumbs: boolean = false, breadcrumbParent: string = "", breadcrumbParentHref: string = "", breadcrumbCurrent: string = "", highlights: string = []
+Slots: none
+Events: none
+
+### PageHeading
+Mount: data-component="PageHeading"
+Category: core
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### PageShell
+Mount: data-component="PageShell"
+Category: core
+Props: className: string = ""
+Slots: default
+Events: none
+
+### PageSkeleton
+Mount: data-component="PageSkeleton"
+Category: feedback
+Props: label: string = "Page", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### Pagination
+Mount: data-component="Pagination"
+Category: core
+Props: class: string = "", currentPage: number = 1, totalPages: number = 1, previousHref: string = "", nextHref: string = "", pages: string = [], showNumbers: boolean = true, showSummary: boolean = true, totalItems: number = 0, pageSize: number = 10, compact: boolean = false, centered: boolean = false
+Slots: none
+Events: none
+
+### Panel
+Mount: data-component="Panel"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### PartnerApplicationForm
+Mount: data-component="PartnerApplicationForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PartnerLogoGrid
+Mount: data-component="PartnerLogoGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PartnerProgramCard
+Mount: data-component="PartnerProgramCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PasskeyButton
+Mount: data-component="PasskeyButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PasswordInput
+Mount: data-component="PasswordInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "Password", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### PasswordRequirementList
+Mount: data-component="PasswordRequirementList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PasswordStrengthMeter
+Mount: data-component="PasswordStrengthMeter"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PasswordVisibilityToggle
+Mount: data-component="PasswordVisibilityToggle"
+Category: forms
+Props: label: string = "PasswordVisibility", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PathInput
+Mount: data-component="PathInput"
+Category: forms
+Props: label: string = "Path", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PaymentMethodCard
+Mount: data-component="PaymentMethodCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PdfPreview
+Mount: data-component="PdfPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PercentageInput
+Mount: data-component="PercentageInput"
+Category: forms
+Props: label: string = "Percentage", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PermissionSelector
+Mount: data-component="PermissionSelector"
+Category: forms
+Props: label: string = "Permission", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PhoneInput
+Mount: data-component="PhoneInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "Phone", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### PieChart
+Mount: data-component="PieChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### Pill
+Mount: data-component="Pill"
+Category: core
+Props: label: string = "Pill", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### PinInput
+Mount: data-component="PinInput"
+Category: forms
+Props: label: string = "Pin", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PlainTextEditor
+Mount: data-component="PlainTextEditor"
+Category: forms
+Props: label: string = "PlainText", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PlanCTA
+Mount: data-component="PlanCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PlanFeatureList
+Mount: data-component="PlanFeatureList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PlanLimitList
+Mount: data-component="PlanLimitList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PlanSelector
+Mount: data-component="PlanSelector"
+Category: forms
+Props: label: string = "Plan", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PlatformPillarCard
+Mount: data-component="PlatformPillarCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PolicyVersionTable
+Mount: data-component="PolicyVersionTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### Popover
+Mount: data-component="Popover"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### PortInput
+Mount: data-component="PortInput"
+Category: forms
+Props: label: string = "Port", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PortNumberInput
+Mount: data-component="PortNumberInput"
+Category: forms
+Props: label: string = "PortNumber", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PositiveNumberInput
+Mount: data-component="PositiveNumberInput"
+Category: forms
+Props: label: string = "PositiveNumber", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PostalCodeInput
+Mount: data-component="PostalCodeInput"
+Category: forms
+Props: label: string = "PostalCode", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PostmanCTA
+Mount: data-component="PostmanCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PresetDateRangePicker
+Mount: data-component="PresetDateRangePicker"
+Category: forms
+Props: label: string = "PresetDateRange", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PressReleaseCard
+Mount: data-component="PressReleaseCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PreviewBadge
+Mount: data-component="PreviewBadge"
+Category: feedback
+Props: label: string = "Preview", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### PreviousNextNavigation
+Mount: data-component="PreviousNextNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### PriceInput
+Mount: data-component="PriceInput"
+Category: forms
+Props: label: string = "Price", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PriceRangeSlider
+Mount: data-component="PriceRangeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PriceText
+Mount: data-component="PriceText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### PricingCard
+Mount: data-component="PricingCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PricingComparisonTable
+Mount: data-component="PricingComparisonTable"
+Category: data
+Props: caption: string = "Plan comparison", plans: string = [], features: string = [], class: string = ""
+Slots: none
+Events: none
+
+### PricingContactForm
+Mount: data-component="PricingContactForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PricingFeatureGroup
+Mount: data-component="PricingFeatureGroup"
+Category: forms
+Props: label: string = "PricingFeature", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PricingGrid
+Mount: data-component="PricingGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PricingHero
+Mount: data-component="PricingHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### PricingPlanCard
+Mount: data-component="PricingPlanCard"
+Category: content
+Props: class: string = "", name: string = "Starter", description: string = "", price: string = "₹0", period: string = "/month", featured: boolean = false, ctaLabel: string = "Choose plan", ctaHref: string = "#"
+Slots: default
+Events: none
+
+### PricingTable
+Mount: data-component="PricingTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PricingToggle
+Mount: data-component="PricingToggle"
+Category: forms
+Props: label: string = "Pricing", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PrimaryButton
+Mount: data-component="PrimaryButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PrintAction
+Mount: data-component="PrintAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PrintPolicyButton
+Mount: data-component="PrintPolicyButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PrioritySelector
+Mount: data-component="PrioritySelector"
+Category: forms
+Props: label: string = "Priority", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PrivacyNotice
+Mount: data-component="PrivacyNotice"
+Category: feedback
+Props: label: string = "Privacy", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ProductArchitectureDiagram
+Mount: data-component="ProductArchitectureDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ProductCard
+Mount: data-component="ProductCard"
+Category: content
+Props: eyebrow: string = "Product", title: string = "Product name", description: string = "", href: string = "#", actionLabel: string = "Learn more", status: string = "", class: string = ""
+Slots: none
+Events: none
+
+### ProductCategorySection
+Mount: data-component="ProductCategorySection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ProductCTA
+Mount: data-component="ProductCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ProductFeatureList
+Mount: data-component="ProductFeatureList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ProductGrid
+Mount: data-component="ProductGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ProductHero
+Mount: data-component="ProductHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ProductIcon
+Mount: data-component="ProductIcon"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProductIntegrationList
+Mount: data-component="ProductIntegrationList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ProductList
+Mount: data-component="ProductList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ProductLogo
+Mount: data-component="ProductLogo"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProductMegaMenu
+Mount: data-component="ProductMegaMenu"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: none
+
+### ProductMiniCard
+Mount: data-component="ProductMiniCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProductNavigationCard
+Mount: data-component="ProductNavigationCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProductPageShell
+Mount: data-component="ProductPageShell"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### ProductSelector
+Mount: data-component="ProductSelector"
+Category: forms
+Props: label: string = "Product", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProductsMegaMenu
+Mount: data-component="ProductsMegaMenu"
+Category: overlays
+Props: label: string = "Products", sections: string = [], class: string = ""
+Slots: none
+Events: none
+
+### ProductStatusBadge
+Mount: data-component="ProductStatusBadge"
+Category: feedback
+Props: label: string = "ProductStatus", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ProductUseCaseList
+Mount: data-component="ProductUseCaseList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### progress
+Mount: data-component="progress"
+Category: core
+Props: value: number = 0, max: number = 100, class: string = ""
+Slots: none
+Events: none
+
+### ProgressBar
+Mount: data-component="ProgressBar"
+Category: core
+Props: class: string = "", value: number = 0, max: number = 100, label: string = "Progress", showValue: boolean = true
+Slots: none
+Events: none
+
+### ProgressChart
+Mount: data-component="ProgressChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ProgressRing
+Mount: data-component="ProgressRing"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ProgressSlider
+Mount: data-component="ProgressSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProjectCard
+Mount: data-component="ProjectCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProjectSelector
+Mount: data-component="ProjectSelector"
+Category: forms
+Props: label: string = "Project", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProjectSwitcher
+Mount: data-component="ProjectSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PromoCodeInput
+Mount: data-component="PromoCodeInput"
+Category: forms
+Props: label: string = "PromoCode", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PromptDialog
+Mount: data-component="PromptDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### ProviderSelector
+Mount: data-component="ProviderSelector"
+Category: forms
+Props: label: string = "Provider", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PublicFooter
+Mount: data-component="PublicFooter"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: submit
+
+### PublicHeader
+Mount: data-component="PublicHeader"
+Category: layout
+Props: class: string = ""
+Slots: none
+Events: click
+
+### PublicHeaderLogo
+Mount: data-component="PublicHeaderLogo"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PublicMobileNavigation
+Mount: data-component="PublicMobileNavigation"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: click
+
+### PublicPageShell
+Mount: data-component="PublicPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### PublicSearch
+Mount: data-component="PublicSearch"
+Category: core
+Props: class: string = "", query: string = "", placeholder: string = "Search...", label: string = "Search", action: string = "", method: string = "get", name: string = "q", buttonLabel: string = "", clearLabel: string = "Clear search", size: string = "default", centered: boolean = false, fullWidth: boolean = false, showShortcut: boolean = false, shortcutLabel: string = "⌘ K", suggestions: string = []
+Slots: none
+Events: input, focus, blur, click
+
+### PublishDateTimePicker
+Mount: data-component="PublishDateTimePicker"
+Category: forms
+Props: label: string = "PublishDateTime", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PushComposer
+Mount: data-component="PushComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PushNotificationEditor
+Mount: data-component="PushNotificationEditor"
+Category: forms
+Props: label: string = "PushNotification", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### QrCode
+Mount: data-component="QrCode"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### QuantityInput
+Mount: data-component="QuantityInput"
+Category: forms
+Props: label: string = "Quantity", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### QuantityStepper
+Mount: data-component="QuantityStepper"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### QuietHoursPicker
+Mount: data-component="QuietHoursPicker"
+Category: forms
+Props: label: string = "Quiet hours", startName: string = "quietStart", endName: string = "quietEnd", start: string = "22:00", end: string = "08:00", timezone: string = "UTC", disabled: boolean = false, class: string = ""
+Slots: none
+Events: none
+
+### QuoteText
+Mount: data-component="QuoteText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### Radio
+Mount: data-component="Radio"
+Category: core
+Props: class: string = "", id: string = "", name: string = "choice", value: string = "", label: string = "Option", description: string = "", checked: boolean = false, disabled: boolean = false
+Slots: none
+Events: none
+
+### RadioGroup
+Mount: data-component="RadioGroup"
+Category: forms
+Props: class: string = "", label: string = "Choose one", name: string = "choice"
+Slots: default
+Events: none
+
+### RangeInput
+Mount: data-component="RangeInput"
+Category: forms
+Props: label: string = "Range", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RangeSlider
+Mount: data-component="RangeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RateLimitedState
+Mount: data-component="RateLimitedState"
+Category: feedback
+Props: label: string = "RateLimited", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### RateLimitInput
+Mount: data-component="RateLimitInput"
+Category: forms
+Props: label: string = "RateLimit", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RateLimitPage
+Mount: data-component="RateLimitPage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RateTable
+Mount: data-component="RateTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### RatingSlider
+Mount: data-component="RatingSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RecipientSelector
+Mount: data-component="RecipientSelector"
+Category: forms
+Props: label: string = "Recipient", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RecoveryCodeForm
+Mount: data-component="RecoveryCodeForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RecoveryCodeInput
+Mount: data-component="RecoveryCodeInput"
+Category: forms
+Props: label: string = "RecoveryCode", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RecurrenceRuleBuilder
+Mount: data-component="RecurrenceRuleBuilder"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RecurringSchedulePicker
+Mount: data-component="RecurringSchedulePicker"
+Category: forms
+Props: id: string = "recurring-schedule", name: string = "recurrence", label: string = "Repeat", value: string = "none", disabled: boolean = false, class: string = ""
+Slots: none
+Events: none
+
+### RedirectUriInput
+Mount: data-component="RedirectUriInput"
+Category: forms
+Props: label: string = "RedirectUri", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ReferenceInput
+Mount: data-component="ReferenceInput"
+Category: forms
+Props: label: string = "Reference", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RegexInput
+Mount: data-component="RegexInput"
+Category: forms
+Props: label: string = "Regex", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RegionalPrivacyBanner
+Mount: data-component="RegionalPrivacyBanner"
+Category: feedback
+Props: label: string = "RegionalPrivacy", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### RegionAvailabilityTable
+Mount: data-component="RegionAvailabilityTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### RegionSelector
+Mount: data-component="RegionSelector"
+Category: forms
+Props: label: string = "Region", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RegionUnavailableAlert
+Mount: data-component="RegionUnavailableAlert"
+Category: feedback
+Props: label: string = "RegionUnavailable", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### RegionUnavailableState
+Mount: data-component="RegionUnavailableState"
+Category: feedback
+Props: label: string = "RegionUnavailable", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### RejectOptionalCookiesButton
+Mount: data-component="RejectOptionalCookiesButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ReopenCookieSettingsButton
+Mount: data-component="ReopenCookieSettingsButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ReportCard
+Mount: data-component="ReportCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RequestResponseViewer
+Mount: data-component="RequestResponseViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RequestViewer
+Mount: data-component="RequestViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RequiredIndicator
+Mount: data-component="RequiredIndicator"
+Category: feedback
+Props: label: string = "Required", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ResetPasswordForm
+Mount: data-component="ResetPasswordForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ResizablePanel
+Mount: data-component="ResizablePanel"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ResourceCard
+Mount: data-component="ResourceCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ResourceDownloadCard
+Mount: data-component="ResourceDownloadCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ResourcePageShell
+Mount: data-component="ResourcePageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ResourceSearch
+Mount: data-component="ResourceSearch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ResourcesMegaMenu
+Mount: data-component="ResourcesMegaMenu"
+Category: overlays
+Props: class: string = ""
+Slots: none
+Events: none
+
+### ResourceTypeBadge
+Mount: data-component="ResourceTypeBadge"
+Category: feedback
+Props: label: string = "ResourceType", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ResponseViewer
+Mount: data-component="ResponseViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ResponsibleDisclosureCTA
+Mount: data-component="ResponsibleDisclosureCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ResponsiveTable
+Mount: data-component="ResponsiveTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ResultsSection
+Mount: data-component="ResultsSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### RetentionTable
+Mount: data-component="RetentionTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### RetryCountInput
+Mount: data-component="RetryCountInput"
+Category: forms
+Props: label: string = "RetryCount", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RevenueChart
+Mount: data-component="RevenueChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### RgbColorInput
+Mount: data-component="RgbColorInput"
+Category: forms
+Props: label: string = "RgbColor", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RichTextEditor
+Mount: data-component="RichTextEditor"
+Category: forms
+Props: label: string = "RichText", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RichTextInput
+Mount: data-component="RichTextInput"
+Category: forms
+Props: label: string = "RichText", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RoleSelector
+Mount: data-component="RoleSelector"
+Category: forms
+Props: label: string = "Role", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RollingDateRangePicker
+Mount: data-component="RollingDateRangePicker"
+Category: forms
+Props: label: string = "RollingDateRange", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SaveCookiePreferencesButton
+Mount: data-component="SaveCookiePreferencesButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SavedFilterSelector
+Mount: data-component="SavedFilterSelector"
+Category: forms
+Props: label: string = "SavedFilter", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ScheduledDateTimePicker
+Mount: data-component="ScheduledDateTimePicker"
+Category: forms
+Props: label: string = "ScheduledDateTime", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ScheduleMessagePicker
+Mount: data-component="ScheduleMessagePicker"
+Category: forms
+Props: label: string = "ScheduleMessage", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SchedulePicker
+Mount: data-component="SchedulePicker"
+Category: forms
+Props: class: string = "", label: string = "Schedule"
+Slots: none
+Events: none
+
+### ScreenshotFrame
+Mount: data-component="ScreenshotFrame"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ScrollArea
+Mount: data-component="ScrollArea"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### SDKCard
+Mount: data-component="SDKCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SdkLanguageSelector
+Mount: data-component="SdkLanguageSelector"
+Category: forms
+Props: label: string = "SdkLanguage", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SDKLanguageTabs
+Mount: data-component="SDKLanguageTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SDKTabs
+Mount: data-component="SDKTabs"
+Category: core
+Props: label: string = "SDK languages", tabs: string = [], defaultIndex: number = 0, class: string = ""
+Slots: none
+Events: click
+
+### SearchButton
+Mount: data-component="SearchButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SearchCategoryTabs
+Mount: data-component="SearchCategoryTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SearchDialog
+Mount: data-component="SearchDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### SearchEmptyState
+Mount: data-component="SearchEmptyState"
+Category: feedback
+Props: label: string = "SearchEmpty", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### SearchInput
+Mount: data-component="SearchInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "Search", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### SearchLoadingState
+Mount: data-component="SearchLoadingState"
+Category: feedback
+Props: label: string = "SearchLoading", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### SearchResultItem
+Mount: data-component="SearchResultItem"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SecondaryButton
+Mount: data-component="SecondaryButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SecondPicker
+Mount: data-component="SecondPicker"
+Category: forms
+Props: label: string = "Second", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SecretDisplay
+Mount: data-component="SecretDisplay"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SecretInput
+Mount: data-component="SecretInput"
+Category: forms
+Props: label: string = "Secret", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SecretRevealDialog
+Mount: data-component="SecretRevealDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### Section
+Mount: data-component="Section"
+Category: layout
+Props: id: string = "", size: string = "default", surface: string = "default", className: string = ""
+Slots: default
+Events: none
+
+### SectionActions
+Mount: data-component="SectionActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SectionHeader
+Mount: data-component="SectionHeader"
+Category: layout
+Props: class: string = "", eyebrow: string = "", title: string = "Section title", description: string = "", align: string = "left"
+Slots: default
+Events: none
+
+### SectionHeading
+Mount: data-component="SectionHeading"
+Category: core
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SecurityAlert
+Mount: data-component="SecurityAlert"
+Category: feedback
+Props: label: string = "Security", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### SecurityContactCard
+Mount: data-component="SecurityContactCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SecurityFeatureCard
+Mount: data-component="SecurityFeatureCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SecurityHero
+Mount: data-component="SecurityHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SecurityPillarGrid
+Mount: data-component="SecurityPillarGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### SecurityPracticeList
+Mount: data-component="SecurityPracticeList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### SecurityReportForm
+Mount: data-component="SecurityReportForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Select
+Mount: data-component="Select"
+Category: core
+Props: class: string = "", id: string = "", name: string = "", label: string = "Select", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false
+Slots: default
+Events: none
+
+### SenderIdInput
+Mount: data-component="SenderIdInput"
+Category: forms
+Props: label: string = "SenderId", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ServerErrorPage
+Mount: data-component="ServerErrorPage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ServiceLevelTable
+Mount: data-component="ServiceLevelTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ServiceStatusBadge
+Mount: data-component="ServiceStatusBadge"
+Category: feedback
+Props: label: string = "ServiceStatus", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ServiceStatusList
+Mount: data-component="ServiceStatusList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ServiceStatusRow
+Mount: data-component="ServiceStatusRow"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### SessionCard
+Mount: data-component="SessionCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SessionExpiredDialog
+Mount: data-component="SessionExpiredDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### SetupChecklist
+Mount: data-component="SetupChecklist"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SeveritySelector
+Mount: data-component="SeveritySelector"
+Category: forms
+Props: label: string = "Severity", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ShadowPicker
+Mount: data-component="ShadowPicker"
+Category: forms
+Props: label: string = "Shadow", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ShareAction
+Mount: data-component="ShareAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ShareButton
+Mount: data-component="ShareButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SidebarLayout
+Mount: data-component="SidebarLayout"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### SidePanel
+Mount: data-component="SidePanel"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SignInForm
+Mount: data-component="SignInForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SignInLink
+Mount: data-component="SignInLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SignUpForm
+Mount: data-component="SignUpForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SiteSearch
+Mount: data-component="SiteSearch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Skeleton
+Mount: data-component="Skeleton"
+Category: feedback
+Props: height: string = "4", rounded: string = "lg", className: string = ""
+Slots: none
+Events: none
+
+### SkipLink
+Mount: data-component="SkipLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SlaTable
+Mount: data-component="SlaTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### Slider
+Mount: data-component="Slider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SlugInput
+Mount: data-component="SlugInput"
+Category: forms
+Props: label: string = "Slug", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SmallText
+Mount: data-component="SmallText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SmartRouteDiagram
+Mount: data-component="SmartRouteDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SmsComposer
+Mount: data-component="SmsComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SmsMessageEditor
+Mount: data-component="SmsMessageEditor"
+Category: forms
+Props: label: string = "SmsMessage", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SmsSegmentCounter
+Mount: data-component="SmsSegmentCounter"
+Category: feedback
+Props: label: string = "SmsSegment", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### SocialShare
+Mount: data-component="SocialShare"
+Category: core
+Props: class: string = "", title: string = "Share this page", description: string = "", url: string = "", shareText: string = "", centered: boolean = false, compact: boolean = false, showTitle: boolean = true, showCopy: boolean = true, networks: string = []
+Slots: none
+Events: click
+
+### SolutionHero
+Mount: data-component="SolutionHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SolutionPageShell
+Mount: data-component="SolutionPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SolutionSection
+Mount: data-component="SolutionSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SolutionsMegaMenu
+Mount: data-component="SolutionsMegaMenu"
+Category: overlays
+Props: class: string = ""
+Slots: none
+Events: none
+
+### SortableTable
+Mount: data-component="SortableTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### spacer
+Mount: data-component="spacer"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: none
+
+### Spinner
+Mount: data-component="Spinner"
+Category: core
+Props: class: string = "", label: string = "Loading", size: string = "md"
+Slots: none
+Events: none
+
+### SplitButton
+Mount: data-component="SplitButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SplitCTA
+Mount: data-component="SplitCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SplitHero
+Mount: data-component="SplitHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SplitLayout
+Mount: data-component="SplitLayout"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### SplitSectionHeader
+Mount: data-component="SplitSectionHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### Stack
+Mount: data-component="Stack"
+Category: core
+Props: gap: string = "4", className: string = ""
+Slots: default
+Events: none
+
+### StartFreeButton
+Mount: data-component="StartFreeButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### StatCard
+Mount: data-component="StatCard"
+Category: content
+Props: class: string = "", label: string = "Metric", value: string = "0", change: string = "", trend: string = "neutral"
+Slots: none
+Events: none
+
+### StateSelector
+Mount: data-component="StateSelector"
+Category: forms
+Props: label: string = "State", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### StatusBadge
+Mount: data-component="StatusBadge"
+Category: feedback
+Props: class: string = "", status: string = "operational"
+Slots: none
+Events: none
+
+### StatusBanner
+Mount: data-component="StatusBanner"
+Category: core
+Props: class: string = "", type: string = "info", title: string = "", description: string = "", actionLabel: string = "", actionHref: string = "", dismissible: boolean = true, compact: boolean = false, details: string = []
+Slots: none
+Events: click
+
+### StatusPageShell
+Mount: data-component="StatusPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### StatusSelector
+Mount: data-component="StatusSelector"
+Category: forms
+Props: label: string = "Status", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### StatusSubscribeForm
+Mount: data-component="StatusSubscribeForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### StatusTable
+Mount: data-component="StatusTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### StepNavigation
+Mount: data-component="StepNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### Stepper
+Mount: data-component="Stepper"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### StepperInput
+Mount: data-component="StepperInput"
+Category: forms
+Props: label: string = "Stepper", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### StepUpAuthenticationDialog
+Mount: data-component="StepUpAuthenticationDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### StickerPicker
+Mount: data-component="StickerPicker"
+Category: forms
+Props: label: string = "Sticker", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Sticky
+Mount: data-component="Sticky"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### StickyLayout
+Mount: data-component="StickyLayout"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### StreetAddressInput
+Mount: data-component="StreetAddressInput"
+Category: forms
+Props: label: string = "StreetAddress", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SubdomainInput
+Mount: data-component="SubdomainInput"
+Category: forms
+Props: label: string = "Subdomain", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SubjectInput
+Mount: data-component="SubjectInput"
+Category: forms
+Props: label: string = "Subject", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SubprocessorTable
+Mount: data-component="SubprocessorTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### SubsectionHeading
+Mount: data-component="SubsectionHeading"
+Category: core
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SuccessCard
+Mount: data-component="SuccessCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SuccessState
+Mount: data-component="SuccessState"
+Category: feedback
+Props: label: string = "Success", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### SupportRequestForm
+Mount: data-component="SupportRequestForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Surface
+Mount: data-component="Surface"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### Switch
+Mount: data-component="Switch"
+Category: core
+Props: class: string = "", id: string = "", name: string = "", label: string = "Switch", description: string = "", checked: boolean = false, disabled: boolean = false
+Slots: none
+Events: click
+
+### Table
+Mount: data-component="Table"
+Category: data
+Props: class: string = "", caption: string = "Data table", responsive: boolean = true
+Slots: default
+Events: none
+
+### TableHeader
+Mount: data-component="TableHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### TableRow
+Mount: data-component="TableRow"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### TableSkeleton
+Mount: data-component="TableSkeleton"
+Category: feedback
+Props: label: string = "Table", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### Tabs
+Mount: data-component="Tabs"
+Category: content
+Props: class: string = "", active: string = "first"
+Slots: first, second
+Events: click
+
+### tag
+Mount: data-component="tag"
+Category: core
+Props: label: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### TagInput
+Mount: data-component="TagInput"
+Category: forms
+Props: label: string = "Tag", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TaxNotice
+Mount: data-component="TaxNotice"
+Category: feedback
+Props: label: string = "Tax", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### TaxRateInput
+Mount: data-component="TaxRateInput"
+Category: forms
+Props: label: string = "TaxRate", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TeamMemberCard
+Mount: data-component="TeamMemberCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TeamSizeSelector
+Mount: data-component="TeamSizeSelector"
+Category: forms
+Props: label: string = "TeamSize", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TemplateCard
+Mount: data-component="TemplateCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TemplateSelector
+Mount: data-component="TemplateSelector"
+Category: forms
+Props: label: string = "Template", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TemplateVariableInput
+Mount: data-component="TemplateVariableInput"
+Category: forms
+Props: label: string = "TemplateVariable", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TenantIsolationDiagram
+Mount: data-component="TenantIsolationDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### TerminalBlock
+Mount: data-component="TerminalBlock"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TertiaryButton
+Mount: data-component="TertiaryButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### TestimonialCard
+Mount: data-component="TestimonialCard"
+Category: content
+Props: class: string = "", quote: string = "Great product.", name: string = "Customer", role: string = "", company: string = "", avatar: string = ""
+Slots: none
+Events: none
+
+### TestimonialCarousel
+Mount: data-component="TestimonialCarousel"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TestMessageDialog
+Mount: data-component="TestMessageDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### Textarea
+Mount: data-component="Textarea"
+Category: core
+Props: class: string = "", id: string = "", name: string = "", label: string = "Message", value: string = "", placeholder: string = "", rows: number = 5, help: string = "", error: string = "", required: boolean = false, disabled: boolean = false
+Slots: none
+Events: none
+
+### TextInput
+Mount: data-component="TextInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "Text", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### TextLink
+Mount: data-component="TextLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### TextSkeleton
+Mount: data-component="TextSkeleton"
+Category: feedback
+Props: label: string = "Text", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### theme-toggle
+Mount: data-component="theme-toggle"
+Category: core
+Props: label: string = "Toggle theme", class: string = ""
+Slots: default
+Events: none
+
+### ThemeColorPicker
+Mount: data-component="ThemeColorPicker"
+Category: forms
+Props: label: string = "ThemeColor", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ThemeSwitcher
+Mount: data-component="ThemeSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TimeInput
+Mount: data-component="TimeInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "Time", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### Timeline
+Mount: data-component="Timeline"
+Category: visualization
+Props: class: string = "", title: string = "Timeline"
+Slots: default
+Events: none
+
+### TimelineChart
+Mount: data-component="TimelineChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### TimelineItem
+Mount: data-component="TimelineItem"
+Category: content
+Props: class: string = "", title: string = "Event", date: string = "", description: string = "", status: string = "default"
+Slots: none
+Events: none
+
+### TimeoutInput
+Mount: data-component="TimeoutInput"
+Category: forms
+Props: label: string = "Timeout", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TimePicker
+Mount: data-component="TimePicker"
+Category: forms
+Props: id: string = "time-picker", name: string = "time", label: string = "Time", value: string = "", min: string = "", max: string = "", step: number = 60, required: boolean = false, disabled: boolean = false, class: string = ""
+Slots: none
+Events: none
+
+### TimeRangePicker
+Mount: data-component="TimeRangePicker"
+Category: forms
+Props: label: string = "TimeRange", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TimezoneAwareTimePicker
+Mount: data-component="TimezoneAwareTimePicker"
+Category: forms
+Props: label: string = "TimezoneAwareTime", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TimezoneSelector
+Mount: data-component="TimezoneSelector"
+Category: forms
+Props: class: string = "", id: string = "timezone", name: string = "timezone", label: string = "Timezone"
+Slots: none
+Events: none
+
+### Toast
+Mount: data-component="Toast"
+Category: core
+Props: class: string = "", title: string = "Saved", description: string = "", variant: string = "success", duration: number = 5000
+Slots: none
+Events: click
+
+### ToastAction
+Mount: data-component="ToastAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ToastHost
+Mount: data-component="ToastHost"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: click
+
+### ToastIcon
+Mount: data-component="ToastIcon"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ToastProgress
+Mount: data-component="ToastProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### Toggle
+Mount: data-component="Toggle"
+Category: forms
+Props: label: string = "", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ToggleGroup
+Mount: data-component="ToggleGroup"
+Category: forms
+Props: label: string = "Toggle", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TokenInput
+Mount: data-component="TokenInput"
+Category: forms
+Props: label: string = "Token", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Tooltip
+Mount: data-component="Tooltip"
+Category: content
+Props: class: string = "", text: string = "Helpful information", position: string = "top"
+Slots: default
+Events: none
+
+### TotpVerificationForm
+Mount: data-component="TotpVerificationForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TranslatedText
+Mount: data-component="TranslatedText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TreeTable
+Mount: data-component="TreeTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### TrendIndicator
+Mount: data-component="TrendIndicator"
+Category: feedback
+Props: label: string = "Trend", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### TruncatedText
+Mount: data-component="TruncatedText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TrustBadgeList
+Mount: data-component="TrustBadgeList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### Typography
+Mount: data-component="Typography"
+Category: core
+Props: as: string = "p", variant: string = "body", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### UnavailableRegionState
+Mount: data-component="UnavailableRegionState"
+Category: feedback
+Props: label: string = "UnavailableRegion", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### UnifiedTimelinePreview
+Mount: data-component="UnifiedTimelinePreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### UnsavedChangesDialog
+Mount: data-component="UnsavedChangesDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### UploadItem
+Mount: data-component="UploadItem"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### UploadPreview
+Mount: data-component="UploadPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### UploadProgress
+Mount: data-component="UploadProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### UptimeChart
+Mount: data-component="UptimeChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### UptimeMetric
+Mount: data-component="UptimeMetric"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### UrlInput
+Mount: data-component="UrlInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "Url", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### UsagePricingTable
+Mount: data-component="UsagePricingTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### UseCaseSelector
+Mount: data-component="UseCaseSelector"
+Category: forms
+Props: label: string = "UseCase", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### UserCard
+Mount: data-component="UserCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### UsernameInput
+Mount: data-component="UsernameInput"
+Category: forms
+Props: label: string = "Username", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ValueCard
+Mount: data-component="ValueCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ValuesGrid
+Mount: data-component="ValuesGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### VerificationCodeInput
+Mount: data-component="VerificationCodeInput"
+Category: forms
+Props: label: string = "VerificationCode", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VerifiedBadge
+Mount: data-component="VerifiedBadge"
+Category: feedback
+Props: label: string = "Verified", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### VersionSelector
+Mount: data-component="VersionSelector"
+Category: forms
+Props: label: string = "Version", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VerticalTabs
+Mount: data-component="VerticalTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VideoCard
+Mount: data-component="VideoCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VideoPreviewDialog
+Mount: data-component="VideoPreviewDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### VideoUpload
+Mount: data-component="VideoUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VirtualizedTable
+Mount: data-component="VirtualizedTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### VisionSection
+Mount: data-component="VisionSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### VisuallyHidden
+Mount: data-component="VisuallyHidden"
+Category: core
+Props: className: string = ""
+Slots: default
+Events: none
+
+### VoiceScriptComposer
+Mount: data-component="VoiceScriptComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VoiceScriptEditor
+Mount: data-component="VoiceScriptEditor"
+Category: forms
+Props: label: string = "VoiceScript", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VolumeInput
+Mount: data-component="VolumeInput"
+Category: forms
+Props: label: string = "Volume", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VolumeSlider
+Mount: data-component="VolumeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WarningCard
+Mount: data-component="WarningCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WebhookEventCard
+Mount: data-component="WebhookEventCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WebhookFlowDiagram
+Mount: data-component="WebhookFlowDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### WebhookPayloadViewer
+Mount: data-component="WebhookPayloadViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WebhookUrlInput
+Mount: data-component="WebhookUrlInput"
+Category: forms
+Props: label: string = "WebhookUrl", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WebinarCard
+Mount: data-component="WebinarCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WebinarRegistrationForm
+Mount: data-component="WebinarRegistrationForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Well
+Mount: data-component="Well"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### WhatsAppComposer
+Mount: data-component="WhatsAppComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WhatsAppNumberInput
+Mount: data-component="WhatsAppNumberInput"
+Category: forms
+Props: label: string = "WhatsAppNumber", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WhatsAppTemplateEditor
+Mount: data-component="WhatsAppTemplateEditor"
+Category: forms
+Props: label: string = "WhatsAppTemplate", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WideContainer
+Mount: data-component="WideContainer"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### Wizard
+Mount: data-component="Wizard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WizardHeader
+Mount: data-component="WizardHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### WizardNavigation
+Mount: data-component="WizardNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### WorkflowCanvasPreview
+Mount: data-component="WorkflowCanvasPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WorkflowProgress
+Mount: data-component="WorkflowProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### WorkspaceCard
+Mount: data-component="WorkspaceCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WorkspaceSelector
+Mount: data-component="WorkspaceSelector"
+Category: forms
+Props: label: string = "Workspace", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WorkspaceSwitcher
+Mount: data-component="WorkspaceSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### YearPicker
+Mount: data-component="YearPicker"
+Category: forms
+Props: label: string = "Year", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ZoomSlider
+Mount: data-component="ZoomSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+# UI component catalog
+
+The installed @wrnexus/ui release contains 901 documented components. Every mount name, prop type, required/default status, slot, and event is included below and in llms-full.txt.
+
+### AcceptAllCookiesButton
+Mount: data-component="AcceptAllCookiesButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### AccessibleAccordion
+Mount: data-component="AccessibleAccordion"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleCarousel
+Mount: data-component="AccessibleCarousel"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleChartSummary
+Mount: data-component="AccessibleChartSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleDialog
+Mount: data-component="AccessibleDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleErrorSummary
+Mount: data-component="AccessibleErrorSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleIcon
+Mount: data-component="AccessibleIcon"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleMenu
+Mount: data-component="AccessibleMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleTabs
+Mount: data-component="AccessibleTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AccessibleTooltip
+Mount: data-component="AccessibleTooltip"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Accordion
+Mount: data-component="Accordion"
+Category: content
+Props: class: string = "", title: string = "Question", open: boolean = false
+Slots: default
+Events: click
+
+### AccountMenu
+Mount: data-component="AccountMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### AccountStatusBanner
+Mount: data-component="AccountStatusBanner"
+Category: feedback
+Props: label: string = "AccountStatus", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ActionMenu
+Mount: data-component="ActionMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### ActiveFilterList
+Mount: data-component="ActiveFilterList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ActivityList
+Mount: data-component="ActivityList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### AddOnCard
+Mount: data-component="AddOnCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AddressInput
+Mount: data-component="AddressInput"
+Category: forms
+Props: label: string = "Address", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AddressPreview
+Mount: data-component="AddressPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AdvancedFilterBuilder
+Mount: data-component="AdvancedFilterBuilder"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Alert
+Mount: data-component="Alert"
+Category: feedback
+Props: class: string = "", title: string = "Notice", description: string = "", variant: string = "info", dismissible: boolean = false
+Slots: default
+Events: click
+
+### AlertDialog
+Mount: data-component="AlertDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### AmountInput
+Mount: data-component="AmountInput"
+Category: forms
+Props: label: string = "Amount", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AnalyticsDashboardPreview
+Mount: data-component="AnalyticsDashboardPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AnchorNavigation
+Mount: data-component="AnchorNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### AnnouncementBar
+Mount: data-component="AnnouncementBar"
+Category: core
+Props: class: string = "", badge: string = "New", message: string = "WrNexus Organizations is now available.", description: string = "Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO.", href: string = "/organizations", actionLabel: string = "Explore organizations", ariaLabel: string = "Announcement"
+Slots: none
+Events: click
+
+### ApartmentInput
+Mount: data-component="ApartmentInput"
+Category: forms
+Props: label: string = "Apartment", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiAuthenticationNotice
+Mount: data-component="ApiAuthenticationNotice"
+Category: feedback
+Props: label: string = "ApiAuthentication", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ApiEndpointCard
+Mount: data-component="ApiEndpointCard"
+Category: content
+Props: class: string = "", method: string = "GET", path: string = "/api/example", description: string = ""
+Slots: default
+Events: none
+
+### ApiErrorExample
+Mount: data-component="ApiErrorExample"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiHeaderTable
+Mount: data-component="ApiHeaderTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ApiKeyCreateDialog
+Mount: data-component="ApiKeyCreateDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### ApiKeyDisplay
+Mount: data-component="ApiKeyDisplay"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiKeyInput
+Mount: data-component="ApiKeyInput"
+Category: forms
+Props: label: string = "ApiKey", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiMethodBadge
+Mount: data-component="ApiMethodBadge"
+Category: feedback
+Props: label: string = "ApiMethod", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ApiParameterTable
+Mount: data-component="ApiParameterTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ApiRateLimitNotice
+Mount: data-component="ApiRateLimitNotice"
+Category: feedback
+Props: label: string = "ApiRateLimit", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ApiRequestExample
+Mount: data-component="ApiRequestExample"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiResponseExample
+Mount: data-component="ApiResponseExample"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiSchemaTable
+Mount: data-component="ApiSchemaTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ApiSchemaViewer
+Mount: data-component="ApiSchemaViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ApiVersionBadge
+Mount: data-component="ApiVersionBadge"
+Category: feedback
+Props: label: string = "ApiVersion", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### AppHeader
+Mount: data-component="AppHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ArchitectureSection
+Mount: data-component="ArchitectureSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### AreaChart
+Mount: data-component="AreaChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ArticleHero
+Mount: data-component="ArticleHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ArticleLayout
+Mount: data-component="ArticleLayout"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ArticleNewsletterCTA
+Mount: data-component="ArticleNewsletterCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ArticlePageShell
+Mount: data-component="ArticlePageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ArticleShareActions
+Mount: data-component="ArticleShareActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### AspectRatio
+Mount: data-component="AspectRatio"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### AssetCard
+Mount: data-component="AssetCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AttachmentPicker
+Mount: data-component="AttachmentPicker"
+Category: forms
+Props: label: string = "Attachment", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AttachmentUpload
+Mount: data-component="AttachmentUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AudioUpload
+Mount: data-component="AudioUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AuditLogPreview
+Mount: data-component="AuditLogPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AuditTable
+Mount: data-component="AuditTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### AuthenticatorCodeInput
+Mount: data-component="AuthenticatorCodeInput"
+Category: forms
+Props: label: string = "AuthenticatorCode", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AuthorAvatar
+Mount: data-component="AuthorAvatar"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AuthorCard
+Mount: data-component="AuthorCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AuthorizedApplicationCard
+Mount: data-component="AuthorizedApplicationCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AutoGrid
+Mount: data-component="AutoGrid"
+Category: data
+Props: class: string = ""
+Slots: default
+Events: none
+
+### AutomationExampleCard
+Mount: data-component="AutomationExampleCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AvailabilityCalendar
+Mount: data-component="AvailabilityCalendar"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Avatar
+Mount: data-component="Avatar"
+Category: content
+Props: class: string = "", src: string = "", alt: string = "", initials: string = "WR", size: string = "md"
+Slots: none
+Events: none
+
+### AvatarGroup
+Mount: data-component="AvatarGroup"
+Category: forms
+Props: label: string = "Avatar", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### AvatarUpload
+Mount: data-component="AvatarUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BackButton
+Mount: data-component="BackButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### BackToTop
+Mount: data-component="BackToTop"
+Category: core
+Props: class: string = "", label: string = "Back to top", assistiveLabel: string = "Return to the top of the page", threshold: number = 500
+Slots: none
+Events: click
+
+### Badge
+Mount: data-component="Badge"
+Category: feedback
+Props: class: string = "", label: string = "Badge", variant: string = "neutral"
+Slots: none
+Events: none
+
+### BankTransferDetails
+Mount: data-component="BankTransferDetails"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Banner
+Mount: data-component="Banner"
+Category: feedback
+Props: class: string = "", text: string = "Announcement", href: string = "", actionLabel: string = "Learn more", variant: string = "brand"
+Slots: none
+Events: none
+
+### BarChart
+Mount: data-component="BarChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### BetaBadge
+Mount: data-component="BetaBadge"
+Category: feedback
+Props: label: string = "Beta", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### BillingAddressForm
+Mount: data-component="BillingAddressForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BillingExample
+Mount: data-component="BillingExample"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BillingPeriodToggle
+Mount: data-component="BillingPeriodToggle"
+Category: forms
+Props: label: string = "BillingPeriod", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BlackoutDatePicker
+Mount: data-component="BlackoutDatePicker"
+Category: forms
+Props: label: string = "BlackoutDate", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BlogCard
+Mount: data-component="BlogCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BlogGrid
+Mount: data-component="BlogGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### BlogList
+Mount: data-component="BlogList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### BlogSearch
+Mount: data-component="BlogSearch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BodyText
+Mount: data-component="BodyText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### BorderRadiusPicker
+Mount: data-component="BorderRadiusPicker"
+Category: forms
+Props: label: string = "BorderRadius", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BottomNavigation
+Mount: data-component="BottomNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### BrandColorPicker
+Mount: data-component="BrandColorPicker"
+Category: forms
+Props: label: string = "BrandColor", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BrandSelector
+Mount: data-component="BrandSelector"
+Category: forms
+Props: label: string = "Brand", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Breadcrumbs
+Mount: data-component="Breadcrumbs"
+Category: core
+Props: class: string = "", items: string = [], centered: boolean = false, compact: boolean = false, showHome: boolean = true, homeLabel: string = "Home", homeHref: string = "/"
+Slots: none
+Events: none
+
+### BrowserFrame
+Mount: data-component="BrowserFrame"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### BudgetRangeSlider
+Mount: data-component="BudgetRangeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BudgetSelector
+Mount: data-component="BudgetSelector"
+Category: forms
+Props: label: string = "Budget", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### BusinessHoursPicker
+Mount: data-component="BusinessHoursPicker"
+Category: forms
+Props: label: string = "BusinessHours", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Button
+Mount: data-component="Button"
+Category: actions
+Props: label: string = "Button", type: string = "button", variant: string = "primary", size: string = "md", disabled: boolean = false, loading: boolean = false, icon: string = "", className: string = ""
+Slots: none
+Events: none
+
+### ButtonGroup
+Mount: data-component="ButtonGroup"
+Category: forms
+Props: label: string = "Button", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ButtonSelector
+Mount: data-component="ButtonSelector"
+Category: forms
+Props: label: string = "Button", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Calendar
+Mount: data-component="Calendar"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CalendarGrid
+Mount: data-component="CalendarGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CalendarHeader
+Mount: data-component="CalendarHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CalendarNavigation
+Mount: data-component="CalendarNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CallbackUrlInput
+Mount: data-component="CallbackUrlInput"
+Category: forms
+Props: label: string = "CallbackUrl", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CampaignCard
+Mount: data-component="CampaignCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CampaignPerformancePreview
+Mount: data-component="CampaignPerformancePreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CampaignProgress
+Mount: data-component="CampaignProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CapabilityGrid
+Mount: data-component="CapabilityGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CaptchaField
+Mount: data-component="CaptchaField"
+Category: forms
+Props: label: string = "Captcha", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Card
+Mount: data-component="Card"
+Category: content
+Props: variant: string = "default", padding: string = "md", interactive: boolean = false, className: string = ""
+Slots: default
+Events: none
+
+### CardPaymentForm
+Mount: data-component="CardPaymentForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CardSelector
+Mount: data-component="CardSelector"
+Category: forms
+Props: label: string = "Card", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CardSkeleton
+Mount: data-component="CardSkeleton"
+Category: feedback
+Props: label: string = "Card", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### CareerApplicationForm
+Mount: data-component="CareerApplicationForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CareerBenefitsGrid
+Mount: data-component="CareerBenefitsGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### Carousel
+Mount: data-component="Carousel"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CaseStudyCard
+Mount: data-component="CaseStudyCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CaseStudyHero
+Mount: data-component="CaseStudyHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CaseStudyPreview
+Mount: data-component="CaseStudyPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CenteredCTA
+Mount: data-component="CenteredCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CenteredHero
+Mount: data-component="CenteredHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CenteredSectionHeader
+Mount: data-component="CenteredSectionHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CertificateUpload
+Mount: data-component="CertificateUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CertificationBadge
+Mount: data-component="CertificationBadge"
+Category: feedback
+Props: label: string = "Certification", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ChallengeSection
+Mount: data-component="ChallengeSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ChannelBadge
+Mount: data-component="ChannelBadge"
+Category: feedback
+Props: label: string = "Channel", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ChannelCard
+Mount: data-component="ChannelCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ChannelComparisonChart
+Mount: data-component="ChannelComparisonChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ChannelComparisonTable
+Mount: data-component="ChannelComparisonTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ChannelFallbackDiagram
+Mount: data-component="ChannelFallbackDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ChannelFlow
+Mount: data-component="ChannelFlow"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ChannelIcon
+Mount: data-component="ChannelIcon"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ChannelRateTable
+Mount: data-component="ChannelRateTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ChannelSelector
+Mount: data-component="ChannelSelector"
+Category: forms
+Props: label: string = "Channel", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CharacterCounter
+Mount: data-component="CharacterCounter"
+Category: feedback
+Props: label: string = "Character", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ChartEmptyState
+Mount: data-component="ChartEmptyState"
+Category: feedback
+Props: label: string = "ChartEmpty", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ChartTooltip
+Mount: data-component="ChartTooltip"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Checkbox
+Mount: data-component="Checkbox"
+Category: core
+Props: class: string = "", id: string = "", name: string = "", label: string = "Checkbox", description: string = "", checked: boolean = false, disabled: boolean = false
+Slots: none
+Events: none
+
+### CheckboxGroup
+Mount: data-component="CheckboxGroup"
+Category: forms
+Props: label: string = "Checkbox", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Checklist
+Mount: data-component="Checklist"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ChecklistProgress
+Mount: data-component="ChecklistProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### Chip
+Mount: data-component="Chip"
+Category: core
+Props: label: string = "Chip", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ChipInput
+Mount: data-component="ChipInput"
+Category: forms
+Props: label: string = "Chip", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CircularProgress
+Mount: data-component="CircularProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CitySelector
+Mount: data-component="CitySelector"
+Category: forms
+Props: label: string = "City", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ClearFiltersButton
+Mount: data-component="ClearFiltersButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ClickableCard
+Mount: data-component="ClickableCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CloseButton
+Mount: data-component="CloseButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### Cluster
+Mount: data-component="Cluster"
+Category: core
+Props: gap: string = "4", className: string = ""
+Slots: default
+Events: none
+
+### Code
+Mount: data-component="Code"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CodeBlock
+Mount: data-component="CodeBlock"
+Category: content
+Props: class: string = "", language: string = "text", filename: string = "", code: string = ""
+Slots: none
+Events: click
+
+### CodeCopyButton
+Mount: data-component="CodeCopyButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CodeHeader
+Mount: data-component="CodeHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CodeInput
+Mount: data-component="CodeInput"
+Category: forms
+Props: label: string = "Code", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CodeLanguageBadge
+Mount: data-component="CodeLanguageBadge"
+Category: feedback
+Props: label: string = "CodeLanguage", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### CodeTabs
+Mount: data-component="CodeTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CodeText
+Mount: data-component="CodeText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CohortChart
+Mount: data-component="CohortChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ColorGrid
+Mount: data-component="ColorGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ColorHexInput
+Mount: data-component="ColorHexInput"
+Category: forms
+Props: label: string = "ColorHex", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ColorPicker
+Mount: data-component="ColorPicker"
+Category: forms
+Props: label: string = "Color", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ColorSelector
+Mount: data-component="ColorSelector"
+Category: forms
+Props: label: string = "Color", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ColorSwatch
+Mount: data-component="ColorSwatch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Combobox
+Mount: data-component="Combobox"
+Category: core
+Props: id: string = "combobox", name: string = "", label: string = "Choose an option", placeholder: string = "Search options", options: string = [], required: boolean = false, disabled: boolean = false, class: string = ""
+Slots: none
+Events: none
+
+### ComingSoonBadge
+Mount: data-component="ComingSoonBadge"
+Category: feedback
+Props: label: string = "ComingSoon", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ComingSoonState
+Mount: data-component="ComingSoonState"
+Category: feedback
+Props: label: string = "ComingSoon", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### CommandBlock
+Mount: data-component="CommandBlock"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CommandMenu
+Mount: data-component="CommandMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### CommandSearchInput
+Mount: data-component="CommandSearchInput"
+Category: forms
+Props: label: string = "CommandSearch", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CompanyHero
+Mount: data-component="CompanyHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CompanyNameInput
+Mount: data-component="CompanyNameInput"
+Category: forms
+Props: label: string = "CompanyName", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CompanyPageShell
+Mount: data-component="CompanyPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### CompanySizeSelector
+Mount: data-component="CompanySizeSelector"
+Category: forms
+Props: label: string = "CompanySize", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ComparisonDateRangePicker
+Mount: data-component="ComparisonDateRangePicker"
+Category: forms
+Props: label: string = "ComparisonDateRange", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ComparisonTable
+Mount: data-component="ComparisonTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CompletionMeter
+Mount: data-component="CompletionMeter"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ComplianceBadgeList
+Mount: data-component="ComplianceBadgeList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ComplianceProgramCard
+Mount: data-component="ComplianceProgramCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ConfirmationDialog
+Mount: data-component="ConfirmationDialog"
+Category: overlays
+Props: title: string = "Confirm action", description: string = "Are you sure you want to continue?", confirmLabel: string = "Confirm", cancelLabel: string = "Cancel", danger: boolean = false, open: boolean = false, class: string = ""
+Slots: confirm
+Events: click
+
+### ConfirmPasswordInput
+Mount: data-component="ConfirmPasswordInput"
+Category: forms
+Props: label: string = "ConfirmPassword", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ConnectedAccountCard
+Mount: data-component="ConnectedAccountCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ConnectionCard
+Mount: data-component="ConnectionCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ConsentTimelinePreview
+Mount: data-component="ConsentTimelinePreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ContactCard
+Mount: data-component="ContactCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ContactCTA
+Mount: data-component="ContactCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ContactForm
+Mount: data-component="ContactForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ContactHero
+Mount: data-component="ContactHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ContactPageShell
+Mount: data-component="ContactPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ContactSalesBanner
+Mount: data-component="ContactSalesBanner"
+Category: core
+Props: class: string = "", eyebrow: string = "Enterprise identity", title: string = "Ready to secure your next application?", description: string = "", primaryLabel: string = "Contact sales", primaryHref: string = "/contact", secondaryLabel: string = "Start free", secondaryHref: string = "/sign-up", iconClass: string = "icon-[lucide--messages-square]", centered: boolean = false, compact: boolean = false, points: string = [], trustPoints: string = []
+Slots: none
+Events: none
+
+### ContactSalesButton
+Mount: data-component="ContactSalesButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ContactSalesForm
+Mount: data-component="ContactSalesForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Container
+Mount: data-component="Container"
+Category: core
+Props: size: string = "default", className: string = ""
+Slots: default
+Events: none
+
+### ContextMenu
+Mount: data-component="ContextMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### ContextSwitcher
+Mount: data-component="ContextSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ConversationList
+Mount: data-component="ConversationList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ConversationPreview
+Mount: data-component="ConversationPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ConversionChart
+Mount: data-component="ConversionChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CookieBanner
+Mount: data-component="CookieBanner"
+Category: feedback
+Props: class: string = "", title: string = "We use cookies", description: string = "We use essential cookies and optional analytics to improve your experience.", privacyHref: string = "/privacy"
+Slots: none
+Events: click
+
+### CookieCategoryList
+Mount: data-component="CookieCategoryList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CookieCategoryToggle
+Mount: data-component="CookieCategoryToggle"
+Category: forms
+Props: label: string = "CookieCategory", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CookieConsent
+Mount: data-component="CookieConsent"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: click, change
+
+### CookieDetailsTable
+Mount: data-component="CookieDetailsTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CookiePreferencesDialog
+Mount: data-component="CookiePreferencesDialog"
+Category: overlays
+Props: title: string = "Cookie preferences", description: string = "Choose which optional cookies you allow. Essential cookies are always enabled.", saveLabel: string = "Save preferences", acceptLabel: string = "Accept all", rejectLabel: string = "Reject optional", open: boolean = false, class: string = ""
+Slots: none
+Events: change, click
+
+### CookieTable
+Mount: data-component="CookieTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### CoordinatesInput
+Mount: data-component="CoordinatesInput"
+Category: forms
+Props: label: string = "Coordinates", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CoordinatesPicker
+Mount: data-component="CoordinatesPicker"
+Category: forms
+Props: label: string = "Coordinates", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CopyButton
+Mount: data-component="CopyButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CopyCodeButton
+Mount: data-component="CopyCodeButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CopySecretField
+Mount: data-component="CopySecretField"
+Category: forms
+Props: label: string = "CopySecret", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CostBreakdownChart
+Mount: data-component="CostBreakdownChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### CostSummary
+Mount: data-component="CostSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Counter
+Mount: data-component="Counter"
+Category: feedback
+Props: label: string = "Status", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### CountryCallingCodeInput
+Mount: data-component="CountryCallingCodeInput"
+Category: forms
+Props: label: string = "CountryCallingCode", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CountryCallingCodeSelector
+Mount: data-component="CountryCallingCodeSelector"
+Category: forms
+Props: label: string = "CountryCallingCode", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CountrySelector
+Mount: data-component="CountrySelector"
+Category: forms
+Props: label: string = "Country", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CouponInput
+Mount: data-component="CouponInput"
+Category: forms
+Props: label: string = "Coupon", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CreditAmountInput
+Mount: data-component="CreditAmountInput"
+Category: forms
+Props: label: string = "CreditAmount", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CronBuilder
+Mount: data-component="CronBuilder"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CronInput
+Mount: data-component="CronInput"
+Category: forms
+Props: label: string = "Cron", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CsvUpload
+Mount: data-component="CsvUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CTASection
+Mount: data-component="CTASection"
+Category: layout
+Props: class: string = "", eyebrow: string = "Ready?", title: string = "Start building today", description: string = "", primaryLabel: string = "Get started", primaryHref: string = "#", secondaryLabel: string = "Contact sales", secondaryHref: string = "#"
+Slots: none
+Events: none
+
+### CurrencyInput
+Mount: data-component="CurrencyInput"
+Category: forms
+Props: label: string = "Currency", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CurrencySelector
+Mount: data-component="CurrencySelector"
+Category: forms
+Props: label: string = "Currency", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CurrentPasswordInput
+Mount: data-component="CurrentPasswordInput"
+Category: forms
+Props: label: string = "CurrentPassword", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CustomerLogo
+Mount: data-component="CustomerLogo"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### CustomerStoryCard
+Mount: data-component="CustomerStoryCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DangerButton
+Mount: data-component="DangerButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DataProtectionCard
+Mount: data-component="DataProtectionCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DataRetentionTable
+Mount: data-component="DataRetentionTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### DataTable
+Mount: data-component="DataTable"
+Category: data
+Props: caption: string = "Data table", columns: string = [], rows: string = [], emptyMessage: string = "No data available.", striped: boolean = false, class: string = ""
+Slots: none
+Events: none
+
+### DateInput
+Mount: data-component="DateInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "Date", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### DatePicker
+Mount: data-component="DatePicker"
+Category: forms
+Props: class: string = "", id: string = "date", name: string = "date", label: string = "Date", value: string = "", min: string = "", max: string = "", required: boolean = false
+Slots: none
+Events: none
+
+### DateRangeCalendar
+Mount: data-component="DateRangeCalendar"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DateRangePicker
+Mount: data-component="DateRangePicker"
+Category: forms
+Props: class: string = "", label: string = "Date range", startName: string = "startDate", endName: string = "endDate"
+Slots: none
+Events: none
+
+### DateRangeSlider
+Mount: data-component="DateRangeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DateTimeInput
+Mount: data-component="DateTimeInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "DateTime", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### DateTimePicker
+Mount: data-component="DateTimePicker"
+Category: forms
+Props: id: string = "datetime-picker", name: string = "datetime", label: string = "Date and time", value: string = "", min: string = "", max: string = "", required: boolean = false, disabled: boolean = false, class: string = ""
+Slots: none
+Events: none
+
+### DateTimeRangePicker
+Mount: data-component="DateTimeRangePicker"
+Category: forms
+Props: label: string = "DateTimeRange", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DecimalInput
+Mount: data-component="DecimalInput"
+Category: forms
+Props: label: string = "Decimal", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DefinitionList
+Mount: data-component="DefinitionList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### DeleteConfirmationDialog
+Mount: data-component="DeleteConfirmationDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### DeliveryPreview
+Mount: data-component="DeliveryPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DeliveryStatusChart
+Mount: data-component="DeliveryStatusChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DeliveryStatusTimeline
+Mount: data-component="DeliveryStatusTimeline"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DemoRequestForm
+Mount: data-component="DemoRequestForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DepartmentInput
+Mount: data-component="DepartmentInput"
+Category: forms
+Props: label: string = "Department", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DeprecatedFeatureAlert
+Mount: data-component="DeprecatedFeatureAlert"
+Category: feedback
+Props: label: string = "DeprecatedFeature", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### DescriptionList
+Mount: data-component="DescriptionList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### DesktopNavigation
+Mount: data-component="DesktopNavigation"
+Category: layout
+Props: label: string = "Primary navigation", items: string = [], class: string = ""
+Slots: none
+Events: none
+
+### DeveloperCTA
+Mount: data-component="DeveloperCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DeveloperHero
+Mount: data-component="DeveloperHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### DeveloperPageShell
+Mount: data-component="DeveloperPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### DeveloperSearch
+Mount: data-component="DeveloperSearch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DevelopersMegaMenu
+Mount: data-component="DevelopersMegaMenu"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: none
+
+### DevelopersMenu
+Mount: data-component="DevelopersMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### DeviceCard
+Mount: data-component="DeviceCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### disclosure
+Mount: data-component="disclosure"
+Category: core
+Props: summary: string = "Details", class: string = ""
+Slots: default
+Events: none
+
+### DiscountInput
+Mount: data-component="DiscountInput"
+Category: forms
+Props: label: string = "Discount", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DisplayHeading
+Mount: data-component="DisplayHeading"
+Category: core
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### DisplayNameInput
+Mount: data-component="DisplayNameInput"
+Category: forms
+Props: label: string = "DisplayName", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Divider
+Mount: data-component="Divider"
+Category: core
+Props: className: string = ""
+Slots: default
+Events: none
+
+### DocumentPreview
+Mount: data-component="DocumentPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DocumentUpload
+Mount: data-component="DocumentUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DomainInput
+Mount: data-component="DomainInput"
+Category: forms
+Props: label: string = "Domain", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DoNotSellLink
+Mount: data-component="DoNotSellLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DonutChart
+Mount: data-component="DonutChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DownloadAction
+Mount: data-component="DownloadAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DownloadButton
+Mount: data-component="DownloadButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DownloadGateForm
+Mount: data-component="DownloadGateForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DownloadPolicyButton
+Mount: data-component="DownloadPolicyButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### DownloadResourceForm
+Mount: data-component="DownloadResourceForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Drawer
+Mount: data-component="Drawer"
+Category: core
+Props: class: string = "", title: string = "Panel", open: boolean = false, side: string = "right"
+Slots: default
+Events: click
+
+### DropdownMenu
+Mount: data-component="DropdownMenu"
+Category: overlays
+Props: class: string = "", label: string = "Menu"
+Slots: default
+Events: click
+
+### DropdownNavigation
+Mount: data-component="DropdownNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### DurationInput
+Mount: data-component="DurationInput"
+Category: forms
+Props: label: string = "Duration", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DurationPicker
+Mount: data-component="DurationPicker"
+Category: forms
+Props: label: string = "Duration", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### DurationSlider
+Mount: data-component="DurationSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ElevatedCard
+Mount: data-component="ElevatedCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### EmailBodyEditor
+Mount: data-component="EmailBodyEditor"
+Category: forms
+Props: label: string = "EmailBody", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### EmailComposer
+Mount: data-component="EmailComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### EmailInput
+Mount: data-component="EmailInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "Email", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### EmojiPicker
+Mount: data-component="EmojiPicker"
+Category: forms
+Props: label: string = "Emoji", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### EmptyState
+Mount: data-component="EmptyState"
+Category: feedback
+Props: class: string = "", eyebrow: string = "", title: string = "Nothing found", description: string = "", iconClass: string = "icon-[lucide--inbox]", primaryLabel: string = "", primaryHref: string = "", secondaryLabel: string = "", secondaryHref: string = "", compact: boolean = false, centered: boolean = true, suggestions: string = []
+Slots: none
+Events: none
+
+### EncryptionDiagram
+Mount: data-component="EncryptionDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### EnterpriseCTA
+Mount: data-component="EnterpriseCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### EnterpriseHero
+Mount: data-component="EnterpriseHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### EnterprisePricingCard
+Mount: data-component="EnterprisePricingCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### EnvironmentSelector
+Mount: data-component="EnvironmentSelector"
+Category: forms
+Props: label: string = "Environment", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### EnvironmentSwitcher
+Mount: data-component="EnvironmentSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ErrorActions
+Mount: data-component="ErrorActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ErrorCard
+Mount: data-component="ErrorCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ErrorCode
+Mount: data-component="ErrorCode"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ErrorHero
+Mount: data-component="ErrorHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ErrorIllustration
+Mount: data-component="ErrorIllustration"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ErrorPage
+Mount: data-component="ErrorPage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ErrorPageShell
+Mount: data-component="ErrorPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ErrorState
+Mount: data-component="ErrorState"
+Category: feedback
+Props: class: string = "", type: string = "error", eyebrow: string = "", title: string = "Something went wrong", description: string = "", errorCode: string = "", iconClass: string = "", primaryLabel: string = "", primaryHref: string = "", secondaryLabel: string = "", secondaryHref: string = "", retryLabel: string = "", retryAction: string = "", centered: boolean = true, compact: boolean = false, details: string = []
+Slots: none
+Events: click
+
+### ErrorSupportLink
+Mount: data-component="ErrorSupportLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### EstimatedCostSummary
+Mount: data-component="EstimatedCostSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### EventTable
+Mount: data-component="EventTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ExpandableText
+Mount: data-component="ExpandableText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ExpiryDateTimePicker
+Mount: data-component="ExpiryDateTimePicker"
+Category: forms
+Props: label: string = "ExpiryDateTime", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ExportProgress
+Mount: data-component="ExportProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ExternalLink
+Mount: data-component="ExternalLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### EyebrowText
+Mount: data-component="EyebrowText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### FactorCard
+Mount: data-component="FactorCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FallbackRouteBuilder
+Mount: data-component="FallbackRouteBuilder"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FallbackRouteDiagram
+Mount: data-component="FallbackRouteDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FAQ
+Mount: data-component="FAQ"
+Category: core
+Props: class: string = "", eyebrow: string = "", title: string = "Frequently asked questions", description: string = "", items: string = [], centered: boolean = true, allowMultiple: boolean = false, defaultOpenIndex: number = 0
+Slots: none
+Events: none
+
+### FAQAccordion
+Mount: data-component="FAQAccordion"
+Category: core
+Props: class: string = "", eyebrow: string = "", title: string = "Frequently asked questions", description: string = "", items: string = [], centered: boolean = true, compact: boolean = false, allowMultiple: boolean = false, defaultOpenIndex: number = 0, showContact: boolean = false, contactText: string = "Still have questions?", contactLabel: string = "Contact support", contactHref: string = "/support"
+Slots: none
+Events: click
+
+### FaviconUpload
+Mount: data-component="FaviconUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FaxInput
+Mount: data-component="FaxInput"
+Category: forms
+Props: label: string = "Fax", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FeatureCard
+Mount: data-component="FeatureCard"
+Category: content
+Props: class: string = "", icon: string = "✦", title: string = "Feature", description: string = "", href: string = ""
+Slots: none
+Events: none
+
+### FeatureChecklist
+Mount: data-component="FeatureChecklist"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FeatureComparisonTable
+Mount: data-component="FeatureComparisonTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FeaturedBlogCard
+Mount: data-component="FeaturedBlogCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FeatureDetailsPanel
+Mount: data-component="FeatureDetailsPanel"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### FeatureGrid
+Mount: data-component="FeatureGrid"
+Category: data
+Props: columns: number = 3, className: string = ""
+Slots: default
+Events: none
+
+### FeatureIconCard
+Mount: data-component="FeatureIconCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FeatureList
+Mount: data-component="FeatureList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FeatureTabs
+Mount: data-component="FeatureTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FeatureTimeline
+Mount: data-component="FeatureTimeline"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FeatureUnavailableState
+Mount: data-component="FeatureUnavailableState"
+Category: feedback
+Props: label: string = "FeatureUnavailable", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### FieldActions
+Mount: data-component="FieldActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### file-upload
+Mount: data-component="file-upload"
+Category: core
+Props: store: string = "public", endpoint: string = "/api/upload", accept: string = "", multiple: boolean = false, max: number = 0, label: string = "Drag files here or click to browse", class: string = ""
+Slots: none
+Events: none
+
+### FileInput
+Mount: data-component="FileInput"
+Category: forms
+Props: label: string = "File", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FileList
+Mount: data-component="FileList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FileSizeInput
+Mount: data-component="FileSizeInput"
+Category: forms
+Props: label: string = "FileSize", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FileSizeLabel
+Mount: data-component="FileSizeLabel"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FileTypeBadge
+Mount: data-component="FileTypeBadge"
+Category: feedback
+Props: label: string = "FileType", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### FileUpload
+Mount: data-component="FileUpload"
+Category: content
+Props: class: string = "", id: string = "file", name: string = "file", label: string = "Upload file", accept: string = "", multiple: boolean = false, help: string = "Drag and drop or browse"
+Slots: none
+Events: none
+
+### FilterableTable
+Mount: data-component="FilterableTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FilterBar
+Mount: data-component="FilterBar"
+Category: core
+Props: label: string = "Filters", clearLabel: string = "Clear filters", showClear: boolean = true, class: string = ""
+Slots: default
+Events: none
+
+### FilterMenu
+Mount: data-component="FilterMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### FilterSearchInput
+Mount: data-component="FilterSearchInput"
+Category: forms
+Props: label: string = "FilterSearch", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FinalCTA
+Mount: data-component="FinalCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FirstNameInput
+Mount: data-component="FirstNameInput"
+Category: forms
+Props: label: string = "FirstName", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Flex
+Mount: data-component="Flex"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### FontPicker
+Mount: data-component="FontPicker"
+Category: forms
+Props: label: string = "Font", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FontSizePicker
+Mount: data-component="FontSizePicker"
+Category: forms
+Props: label: string = "FontSize", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FontWeightPicker
+Mount: data-component="FontWeightPicker"
+Category: forms
+Props: label: string = "FontWeight", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FooterLanguageSwitcher
+Mount: data-component="FooterLanguageSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FooterStatusIndicator
+Mount: data-component="FooterStatusIndicator"
+Category: feedback
+Props: label: string = "FooterStatus", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ForbiddenPage
+Mount: data-component="ForbiddenPage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ForbiddenState
+Mount: data-component="ForbiddenState"
+Category: feedback
+Props: label: string = "Forbidden", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ForgotPasswordForm
+Mount: data-component="ForgotPasswordForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Form
+Mount: data-component="Form"
+Category: content
+Props: action: string = "", method: string = "post", name: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FormActions
+Mount: data-component="FormActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FormAlert
+Mount: data-component="FormAlert"
+Category: feedback
+Props: label: string = "Form", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### FormDialog
+Mount: data-component="FormDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### FormError
+Mount: data-component="FormError"
+Category: core
+Props: id: string = "", message: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FormErrorSummary
+Mount: data-component="FormErrorSummary"
+Category: content
+Props: class: string = "", title: string = "Please fix the following", visible: boolean = true
+Slots: default
+Events: none
+
+### FormField
+Mount: data-component="FormField"
+Category: forms
+Props: class: string = "", label: string = "Field", help: string = "", error: string = "", required: boolean = false
+Slots: default
+Events: none
+
+### FormGrid
+Mount: data-component="FormGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FormGroup
+Mount: data-component="FormGroup"
+Category: forms
+Props: label: string = "Form", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FormHelpText
+Mount: data-component="FormHelpText"
+Category: content
+Props: id: string = "", text: string = "", class: string = ""
+Slots: default
+Events: none
+
+### FormLabel
+Mount: data-component="FormLabel"
+Category: content
+Props: for: string = "", label: string = "Label", required: boolean = false, optional: boolean = false, class: string = ""
+Slots: none
+Events: none
+
+### FormProgress
+Mount: data-component="FormProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### FormRow
+Mount: data-component="FormRow"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### FormSection
+Mount: data-component="FormSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### FullBleed
+Mount: data-component="FullBleed"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### FullscreenDialog
+Mount: data-component="FullscreenDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### FunnelChart
+Mount: data-component="FunnelChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### GeoChart
+Mount: data-component="GeoChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### GeofenceEditor
+Mount: data-component="GeofenceEditor"
+Category: forms
+Props: label: string = "Geofence", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### GhostButton
+Mount: data-component="GhostButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### GlassCard
+Mount: data-component="GlassCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### GlobalSearch
+Mount: data-component="GlobalSearch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### GradientCTA
+Mount: data-component="GradientCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### GradientPicker
+Mount: data-component="GradientPicker"
+Category: forms
+Props: label: string = "Gradient", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### GradientStopEditor
+Mount: data-component="GradientStopEditor"
+Category: forms
+Props: label: string = "GradientStop", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Grid
+Mount: data-component="Grid"
+Category: data
+Props: gap: string = "4", className: string = ""
+Slots: default
+Events: none
+
+### GuideCard
+Mount: data-component="GuideCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### GuideChecklist
+Mount: data-component="GuideChecklist"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### GuideDifficultyBadge
+Mount: data-component="GuideDifficultyBadge"
+Category: feedback
+Props: label: string = "GuideDifficulty", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### GuideGrid
+Mount: data-component="GuideGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### GuideStep
+Mount: data-component="GuideStep"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Header
+Mount: data-component="Header"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### HeaderActions
+Mount: data-component="HeaderActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### HealthIndicator
+Mount: data-component="HealthIndicator"
+Category: feedback
+Props: label: string = "Health", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### Hero
+Mount: data-component="Hero"
+Category: layout
+Props: class: string = "", eyebrow: string = "", title: string = "Build faster with WRNexusJS", highlight: string = "", description: string = "", primaryLabel: string = "Get started", primaryHref: string = "#", secondaryLabel: string = "Learn more", secondaryHref: string = "#", align: string = "center"
+Slots: default
+Events: none
+
+### HeroActions
+Mount: data-component="HeroActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### HeroCodePanel
+Mount: data-component="HeroCodePanel"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### HeroGradientText
+Mount: data-component="HeroGradientText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HeroPrimaryAction
+Mount: data-component="HeroPrimaryAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### HeroProductPreview
+Mount: data-component="HeroProductPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HeroSecondaryAction
+Mount: data-component="HeroSecondaryAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### HeroTrustText
+Mount: data-component="HeroTrustText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HexColorInput
+Mount: data-component="HexColorInput"
+Category: forms
+Props: label: string = "HexColor", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HiddenField
+Mount: data-component="HiddenField"
+Category: forms
+Props: label: string = "Hidden", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HighlightText
+Mount: data-component="HighlightText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HolidayCalendar
+Mount: data-component="HolidayCalendar"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HostnameInput
+Mount: data-component="HostnameInput"
+Category: forms
+Props: label: string = "Hostname", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HourPicker
+Mount: data-component="HourPicker"
+Category: forms
+Props: label: string = "Hour", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HslColorInput
+Mount: data-component="HslColorInput"
+Category: forms
+Props: label: string = "HslColor", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### hstack
+Mount: data-component="hstack"
+Category: core
+Props: gap: string = "4", align: string = "center", class: string = ""
+Slots: default
+Events: none
+
+### HtmlEditor
+Mount: data-component="HtmlEditor"
+Category: forms
+Props: label: string = "Html", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### HumanApprovalStep
+Mount: data-component="HumanApprovalStep"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Icon
+Mount: data-component="Icon"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### IconButton
+Mount: data-component="IconButton"
+Category: actions
+Props: class: string = "", label: string = "Action", icon: string = "•", variant: string = "ghost", disabled: boolean = false
+Slots: none
+Events: none
+
+### IconPicker
+Mount: data-component="IconPicker"
+Category: forms
+Props: label: string = "Icon", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### IconSelector
+Mount: data-component="IconSelector"
+Category: forms
+Props: label: string = "Icon", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### IdentifierInput
+Mount: data-component="IdentifierInput"
+Category: forms
+Props: label: string = "Identifier", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Illustration
+Mount: data-component="Illustration"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ImageCompressionPreview
+Mount: data-component="ImageCompressionPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ImageEditor
+Mount: data-component="ImageEditor"
+Category: forms
+Props: label: string = "Image", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ImagePreviewDialog
+Mount: data-component="ImagePreviewDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### ImageSelector
+Mount: data-component="ImageSelector"
+Category: forms
+Props: label: string = "Image", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ImageUpload
+Mount: data-component="ImageUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ImportProgress
+Mount: data-component="ImportProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### IncidentAlert
+Mount: data-component="IncidentAlert"
+Category: feedback
+Props: label: string = "Incident", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### IncidentBanner
+Mount: data-component="IncidentBanner"
+Category: feedback
+Props: label: string = "Incident", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### IncidentCard
+Mount: data-component="IncidentCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### IncidentList
+Mount: data-component="IncidentList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### IncidentResponseFlow
+Mount: data-component="IncidentResponseFlow"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### IncidentSeverityBadge
+Mount: data-component="IncidentSeverityBadge"
+Category: feedback
+Props: label: string = "IncidentSeverity", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### IncidentTimeline
+Mount: data-component="IncidentTimeline"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### IndustryBadge
+Mount: data-component="IndustryBadge"
+Category: feedback
+Props: label: string = "Industry", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### IndustrySelector
+Mount: data-component="IndustrySelector"
+Category: forms
+Props: label: string = "Industry", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### InfoCard
+Mount: data-component="InfoCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Inline
+Mount: data-component="Inline"
+Category: core
+Props: gap: string = "4", className: string = ""
+Slots: default
+Events: none
+
+### InlineAlert
+Mount: data-component="InlineAlert"
+Category: feedback
+Props: label: string = "Inline", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### InlineCode
+Mount: data-component="InlineCode"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### input
+Mount: data-component="input"
+Category: core
+Props: type: string = "text", name: string = "", value: string = "", placeholder: string = "", class: string = ""
+Slots: none
+Events: none
+
+### InputGroup
+Mount: data-component="InputGroup"
+Category: forms
+Props: label: string = "Input", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### InsetPanel
+Mount: data-component="InsetPanel"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### IntegerInput
+Mount: data-component="IntegerInput"
+Category: forms
+Props: label: string = "Integer", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### IntegrationCard
+Mount: data-component="IntegrationCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### InvoiceLineItem
+Mount: data-component="InvoiceLineItem"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### InvoiceSummary
+Mount: data-component="InvoiceSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### IpAddressInput
+Mount: data-component="IpAddressInput"
+Category: forms
+Props: label: string = "IpAddress", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### JobCard
+Mount: data-component="JobCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### JobProgress
+Mount: data-component="JobProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### JobTitleInput
+Mount: data-component="JobTitleInput"
+Category: forms
+Props: label: string = "JobTitle", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### JsonInput
+Mount: data-component="JsonInput"
+Category: forms
+Props: label: string = "Json", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### JsonViewer
+Mount: data-component="JsonViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### KeyValueTable
+Mount: data-component="KeyValueTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### KycDocumentUpload
+Mount: data-component="KycDocumentUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LanguageSelector
+Mount: data-component="LanguageSelector"
+Category: forms
+Props: label: string = "Language", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LanguageSwitcher
+Mount: data-component="LanguageSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LastNameInput
+Mount: data-component="LastNameInput"
+Category: forms
+Props: label: string = "LastName", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LatencyMetric
+Mount: data-component="LatencyMetric"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### LatitudeInput
+Mount: data-component="LatitudeInput"
+Category: forms
+Props: label: string = "Latitude", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LeadershipGrid
+Mount: data-component="LeadershipGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LeadText
+Mount: data-component="LeadText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### LegalAcceptanceNotice
+Mount: data-component="LegalAcceptanceNotice"
+Category: feedback
+Props: label: string = "LegalAcceptance", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### LegalBulletList
+Mount: data-component="LegalBulletList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LegalContactBlock
+Mount: data-component="LegalContactBlock"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LegalDefinitionList
+Mount: data-component="LegalDefinitionList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LegalDocumentHeader
+Mount: data-component="LegalDocumentHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### LegalDocumentLayout
+Mount: data-component="LegalDocumentLayout"
+Category: layout
+Props: class: string = "", title: string = "Legal document", effectiveDate: string = "", updatedDate: string = ""
+Slots: toc, default
+Events: none
+
+### LegalHero
+Mount: data-component="LegalHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### LegalLanguageSelector
+Mount: data-component="LegalLanguageSelector"
+Category: forms
+Props: label: string = "LegalLanguage", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LegalNotice
+Mount: data-component="LegalNotice"
+Category: feedback
+Props: label: string = "Legal", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### LegalPageShell
+Mount: data-component="LegalPageShell"
+Category: layout
+Props: class: string = ""
+Slots: navigation, default
+Events: none
+
+### LegalPrintButton
+Mount: data-component="LegalPrintButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### LegalRegionSelector
+Mount: data-component="LegalRegionSelector"
+Category: forms
+Props: label: string = "LegalRegion", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LegalSection
+Mount: data-component="LegalSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### LegalSummary
+Mount: data-component="LegalSummary"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LegalTable
+Mount: data-component="LegalTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LegalTableOfContents
+Mount: data-component="LegalTableOfContents"
+Category: core
+Props: title: string = "On this page", items: string = [], class: string = ""
+Slots: none
+Events: none
+
+### LegalVersionBadge
+Mount: data-component="LegalVersionBadge"
+Category: feedback
+Props: label: string = "LegalVersion", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### LetterSpacingPicker
+Mount: data-component="LetterSpacingPicker"
+Category: forms
+Props: label: string = "LetterSpacing", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LicenseKeyInput
+Mount: data-component="LicenseKeyInput"
+Category: forms
+Props: label: string = "LicenseKey", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Lightbox
+Mount: data-component="Lightbox"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### LineChart
+Mount: data-component="LineChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### LineHeightPicker
+Mount: data-component="LineHeightPicker"
+Category: forms
+Props: label: string = "LineHeight", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Link
+Mount: data-component="Link"
+Category: core
+Props: href: string = "#", label: string = "Link", external: boolean = false, className: string = ""
+Slots: none
+Events: none
+
+### LinkButton
+Mount: data-component="LinkButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### List
+Mount: data-component="List"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LoadingButton
+Mount: data-component="LoadingButton"
+Category: actions
+Props: label: string = "Continue", loadingLabel: string = "Loading…", loading: boolean = false, disabled: boolean = false, type: string = "button", variant: string = "primary", class: string = ""
+Slots: none
+Events: none
+
+### LocaleSelector
+Mount: data-component="LocaleSelector"
+Category: forms
+Props: label: string = "Locale", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LocalizedRouteLink
+Mount: data-component="LocalizedRouteLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### LocationPicker
+Mount: data-component="LocationPicker"
+Category: forms
+Props: label: string = "Location", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Logo
+Mount: data-component="Logo"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LogoCloud
+Mount: data-component="LogoCloud"
+Category: core
+Props: class: string = "", eyebrow: string = "", title: string = "Trusted by teams building modern products", description: string = "", logos: string = [], centered: boolean = true, compact: boolean = false, variant: string = "strip", grayscale: boolean = true, showNames: boolean = false, maxItems: number = 8
+Slots: none
+Events: none
+
+### LogoUpload
+Mount: data-component="LogoUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### LogoutDialog
+Mount: data-component="LogoutDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### LogTable
+Mount: data-component="LogTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### LongitudeInput
+Mount: data-component="LongitudeInput"
+Category: forms
+Props: label: string = "Longitude", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MaintenanceAlert
+Mount: data-component="MaintenanceAlert"
+Category: feedback
+Props: label: string = "Maintenance", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### MaintenanceBanner
+Mount: data-component="MaintenanceBanner"
+Category: feedback
+Props: label: string = "Maintenance", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### MaintenanceCard
+Mount: data-component="MaintenanceCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MaintenancePage
+Mount: data-component="MaintenancePage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MaintenanceState
+Mount: data-component="MaintenanceState"
+Category: feedback
+Props: label: string = "Maintenance", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### MaintenanceWindowPicker
+Mount: data-component="MaintenanceWindowPicker"
+Category: forms
+Props: label: string = "MaintenanceWindow", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MapPicker
+Mount: data-component="MapPicker"
+Category: forms
+Props: label: string = "Map", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MarkdownEditor
+Mount: data-component="MarkdownEditor"
+Category: forms
+Props: label: string = "Markdown", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MarketingPageShell
+Mount: data-component="MarketingPageShell"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### MarketingSectionHeader
+Mount: data-component="MarketingSectionHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### MaskedSecretField
+Mount: data-component="MaskedSecretField"
+Category: forms
+Props: label: string = "MaskedSecret", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MegaMenu
+Mount: data-component="MegaMenu"
+Category: overlays
+Props: label: string = "Explore", sections: string = [], class: string = ""
+Slots: none
+Events: click
+
+### MemberList
+Mount: data-component="MemberList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### MentionInput
+Mount: data-component="MentionInput"
+Category: forms
+Props: label: string = "Mention", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MessageCharacterCounter
+Mount: data-component="MessageCharacterCounter"
+Category: feedback
+Props: label: string = "MessageCharacter", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### MessageComposer
+Mount: data-component="MessageComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MessageComposerPreview
+Mount: data-component="MessageComposerPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MessageLimitInput
+Mount: data-component="MessageLimitInput"
+Category: forms
+Props: label: string = "MessageLimit", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MessagePreview
+Mount: data-component="MessagePreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MessageVolumeSlider
+Mount: data-component="MessageVolumeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Metric
+Mount: data-component="Metric"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### MetricCard
+Mount: data-component="MetricCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MetricGrid
+Mount: data-component="MetricGrid"
+Category: data
+Props: label: string = "Key metrics", metrics: string = [], class: string = ""
+Slots: none
+Events: none
+
+### MetricText
+Mount: data-component="MetricText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### MinutePicker
+Mount: data-component="MinutePicker"
+Category: forms
+Props: label: string = "Minute", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MissionSection
+Mount: data-component="MissionSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### MobileDeviceFrame
+Mount: data-component="MobileDeviceFrame"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### MobileInput
+Mount: data-component="MobileInput"
+Category: forms
+Props: label: string = "Mobile", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MobileMenuButton
+Mount: data-component="MobileMenuButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### MobileNavigation
+Mount: data-component="MobileNavigation"
+Category: layout
+Props: label: string = "Menu", closeLabel: string = "Close menu", items: string = [], class: string = ""
+Slots: none
+Events: click
+
+### MobileTableCard
+Mount: data-component="MobileTableCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Modal
+Mount: data-component="Modal"
+Category: core
+Props: class: string = "", title: string = "Dialog", description: string = "", open: boolean = false, size: string = "md", closeLabel: string = "Close"
+Slots: default
+Events: click
+
+### MonthlyVolumeSelector
+Mount: data-component="MonthlyVolumeSelector"
+Category: forms
+Props: label: string = "MonthlyVolume", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MonthPicker
+Mount: data-component="MonthPicker"
+Category: forms
+Props: label: string = "Month", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MonthYearPicker
+Mount: data-component="MonthYearPicker"
+Category: forms
+Props: label: string = "MonthYear", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MultiFileUpload
+Mount: data-component="MultiFileUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MultipleEmailInput
+Mount: data-component="MultipleEmailInput"
+Category: forms
+Props: label: string = "MultipleEmail", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### MultiSelect
+Mount: data-component="MultiSelect"
+Category: core
+Props: id: string = "multi-select", name: string = "", label: string = "Choose options", options: string = [], required: boolean = false, disabled: boolean = false, size: number = 5, class: string = ""
+Slots: none
+Events: none
+
+### MutedText
+Mount: data-component="MutedText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### NameInput
+Mount: data-component="NameInput"
+Category: forms
+Props: label: string = "Name", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### NarrowContainer
+Mount: data-component="NarrowContainer"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### Navigation
+Mount: data-component="Navigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### NavigationItem
+Mount: data-component="NavigationItem"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### NavigationMegaMenu
+Mount: data-component="NavigationMegaMenu"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### NewBadge
+Mount: data-component="NewBadge"
+Category: feedback
+Props: label: string = "New", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### NewPasswordInput
+Mount: data-component="NewPasswordInput"
+Category: forms
+Props: label: string = "NewPassword", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### NewsletterCTA
+Mount: data-component="NewsletterCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### NewsletterForm
+Mount: data-component="NewsletterForm"
+Category: content
+Props: class: string = "", eyebrow: string = "", title: string = "Stay up to date", description: string = "", placeholder: string = "Enter your email", buttonLabel: string = "Subscribe", action: string = "/newsletter/subscribe", method: string = "post", emailName: string = "email", privacyLabel: string = "", privacyHref: string = "/privacy", successMessage: string = "You are subscribed.", errorMessage: string = "Something went wrong. Please try again.", iconClass: string = "icon-[lucide--mail]", centered: boolean = false, compact: boolean = false, showIcon: boolean = true, showPrivacy: boolean = true, fullWidth: boolean = false
+Slots: none
+Events: submit, input
+
+### NoResultsState
+Mount: data-component="NoResultsState"
+Category: feedback
+Props: label: string = "NoResults", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### NotFoundPage
+Mount: data-component="NotFoundPage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### NotFoundState
+Mount: data-component="NotFoundState"
+Category: feedback
+Props: label: string = "NotFound", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### NotificationCard
+Mount: data-component="NotificationCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### NotificationDot
+Mount: data-component="NotificationDot"
+Category: core
+Props: label: string = "Notification", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### NotificationList
+Mount: data-component="NotificationList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### NumberInput
+Mount: data-component="NumberInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "Number", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### OfficeCard
+Mount: data-component="OfficeCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### OfflinePage
+Mount: data-component="OfflinePage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### OfflineState
+Mount: data-component="OfflineState"
+Category: feedback
+Props: label: string = "Offline", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### OnboardingProgress
+Mount: data-component="OnboardingProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### OneTimeSecretDisplay
+Mount: data-component="OneTimeSecretDisplay"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### OnlineIndicator
+Mount: data-component="OnlineIndicator"
+Category: feedback
+Props: label: string = "Online", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### OpacitySlider
+Mount: data-component="OpacitySlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### OpenAPICTA
+Mount: data-component="OpenAPICTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### OptionalIndicator
+Mount: data-component="OptionalIndicator"
+Category: feedback
+Props: label: string = "Optional", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### OrganizationSelector
+Mount: data-component="OrganizationSelector"
+Category: forms
+Props: label: string = "Organization", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### OtpInput
+Mount: data-component="OtpInput"
+Category: forms
+Props: class: string = "", name: string = "otp", length: number = 6, label: string = "Verification code"
+Slots: none
+Events: none
+
+### OtpVerificationForm
+Mount: data-component="OtpVerificationForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### OutlinedCard
+Mount: data-component="OutlinedCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PageAlert
+Mount: data-component="PageAlert"
+Category: feedback
+Props: label: string = "Page", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### PageHeader
+Mount: data-component="PageHeader"
+Category: core
+Props: class: string = "", eyebrow: string = "", title: string = "", description: string = "", primaryLabel: string = "", primaryHref: string = "", secondaryLabel: string = "", secondaryHref: string = "", icon: string = "sparkles", centered: boolean = false, compact: boolean = false, showBreadcrumbs: boolean = false, breadcrumbParent: string = "", breadcrumbParentHref: string = "", breadcrumbCurrent: string = "", highlights: string = []
+Slots: none
+Events: none
+
+### PageHeading
+Mount: data-component="PageHeading"
+Category: core
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### PageShell
+Mount: data-component="PageShell"
+Category: core
+Props: className: string = ""
+Slots: default
+Events: none
+
+### PageSkeleton
+Mount: data-component="PageSkeleton"
+Category: feedback
+Props: label: string = "Page", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### Pagination
+Mount: data-component="Pagination"
+Category: core
+Props: class: string = "", currentPage: number = 1, totalPages: number = 1, previousHref: string = "", nextHref: string = "", pages: string = [], showNumbers: boolean = true, showSummary: boolean = true, totalItems: number = 0, pageSize: number = 10, compact: boolean = false, centered: boolean = false
+Slots: none
+Events: none
+
+### Panel
+Mount: data-component="Panel"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### PartnerApplicationForm
+Mount: data-component="PartnerApplicationForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PartnerLogoGrid
+Mount: data-component="PartnerLogoGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PartnerProgramCard
+Mount: data-component="PartnerProgramCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PasskeyButton
+Mount: data-component="PasskeyButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PasswordInput
+Mount: data-component="PasswordInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "Password", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### PasswordRequirementList
+Mount: data-component="PasswordRequirementList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PasswordStrengthMeter
+Mount: data-component="PasswordStrengthMeter"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PasswordVisibilityToggle
+Mount: data-component="PasswordVisibilityToggle"
+Category: forms
+Props: label: string = "PasswordVisibility", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PathInput
+Mount: data-component="PathInput"
+Category: forms
+Props: label: string = "Path", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PaymentMethodCard
+Mount: data-component="PaymentMethodCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PdfPreview
+Mount: data-component="PdfPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PercentageInput
+Mount: data-component="PercentageInput"
+Category: forms
+Props: label: string = "Percentage", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PermissionSelector
+Mount: data-component="PermissionSelector"
+Category: forms
+Props: label: string = "Permission", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PhoneInput
+Mount: data-component="PhoneInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "Phone", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### PieChart
+Mount: data-component="PieChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### Pill
+Mount: data-component="Pill"
+Category: core
+Props: label: string = "Pill", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### PinInput
+Mount: data-component="PinInput"
+Category: forms
+Props: label: string = "Pin", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PlainTextEditor
+Mount: data-component="PlainTextEditor"
+Category: forms
+Props: label: string = "PlainText", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PlanCTA
+Mount: data-component="PlanCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PlanFeatureList
+Mount: data-component="PlanFeatureList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PlanLimitList
+Mount: data-component="PlanLimitList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PlanSelector
+Mount: data-component="PlanSelector"
+Category: forms
+Props: label: string = "Plan", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PlatformPillarCard
+Mount: data-component="PlatformPillarCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PolicyVersionTable
+Mount: data-component="PolicyVersionTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### Popover
+Mount: data-component="Popover"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### PortInput
+Mount: data-component="PortInput"
+Category: forms
+Props: label: string = "Port", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PortNumberInput
+Mount: data-component="PortNumberInput"
+Category: forms
+Props: label: string = "PortNumber", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PositiveNumberInput
+Mount: data-component="PositiveNumberInput"
+Category: forms
+Props: label: string = "PositiveNumber", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PostalCodeInput
+Mount: data-component="PostalCodeInput"
+Category: forms
+Props: label: string = "PostalCode", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PostmanCTA
+Mount: data-component="PostmanCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PresetDateRangePicker
+Mount: data-component="PresetDateRangePicker"
+Category: forms
+Props: label: string = "PresetDateRange", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PressReleaseCard
+Mount: data-component="PressReleaseCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PreviewBadge
+Mount: data-component="PreviewBadge"
+Category: feedback
+Props: label: string = "Preview", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### PreviousNextNavigation
+Mount: data-component="PreviousNextNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### PriceInput
+Mount: data-component="PriceInput"
+Category: forms
+Props: label: string = "Price", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PriceRangeSlider
+Mount: data-component="PriceRangeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PriceText
+Mount: data-component="PriceText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### PricingCard
+Mount: data-component="PricingCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PricingComparisonTable
+Mount: data-component="PricingComparisonTable"
+Category: data
+Props: caption: string = "Plan comparison", plans: string = [], features: string = [], class: string = ""
+Slots: none
+Events: none
+
+### PricingContactForm
+Mount: data-component="PricingContactForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PricingFeatureGroup
+Mount: data-component="PricingFeatureGroup"
+Category: forms
+Props: label: string = "PricingFeature", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PricingGrid
+Mount: data-component="PricingGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PricingHero
+Mount: data-component="PricingHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### PricingPlanCard
+Mount: data-component="PricingPlanCard"
+Category: content
+Props: class: string = "", name: string = "Starter", description: string = "", price: string = "₹0", period: string = "/month", featured: boolean = false, ctaLabel: string = "Choose plan", ctaHref: string = "#"
+Slots: default
+Events: none
+
+### PricingTable
+Mount: data-component="PricingTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### PricingToggle
+Mount: data-component="PricingToggle"
+Category: forms
+Props: label: string = "Pricing", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PrimaryButton
+Mount: data-component="PrimaryButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PrintAction
+Mount: data-component="PrintAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PrintPolicyButton
+Mount: data-component="PrintPolicyButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### PrioritySelector
+Mount: data-component="PrioritySelector"
+Category: forms
+Props: label: string = "Priority", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PrivacyNotice
+Mount: data-component="PrivacyNotice"
+Category: feedback
+Props: label: string = "Privacy", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ProductArchitectureDiagram
+Mount: data-component="ProductArchitectureDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ProductCard
+Mount: data-component="ProductCard"
+Category: content
+Props: eyebrow: string = "Product", title: string = "Product name", description: string = "", href: string = "#", actionLabel: string = "Learn more", status: string = "", class: string = ""
+Slots: none
+Events: none
+
+### ProductCategorySection
+Mount: data-component="ProductCategorySection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ProductCTA
+Mount: data-component="ProductCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ProductFeatureList
+Mount: data-component="ProductFeatureList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ProductGrid
+Mount: data-component="ProductGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ProductHero
+Mount: data-component="ProductHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ProductIcon
+Mount: data-component="ProductIcon"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProductIntegrationList
+Mount: data-component="ProductIntegrationList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ProductList
+Mount: data-component="ProductList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ProductLogo
+Mount: data-component="ProductLogo"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProductMegaMenu
+Mount: data-component="ProductMegaMenu"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: none
+
+### ProductMiniCard
+Mount: data-component="ProductMiniCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProductNavigationCard
+Mount: data-component="ProductNavigationCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProductPageShell
+Mount: data-component="ProductPageShell"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### ProductSelector
+Mount: data-component="ProductSelector"
+Category: forms
+Props: label: string = "Product", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProductsMegaMenu
+Mount: data-component="ProductsMegaMenu"
+Category: overlays
+Props: label: string = "Products", sections: string = [], class: string = ""
+Slots: none
+Events: none
+
+### ProductStatusBadge
+Mount: data-component="ProductStatusBadge"
+Category: feedback
+Props: label: string = "ProductStatus", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ProductUseCaseList
+Mount: data-component="ProductUseCaseList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### progress
+Mount: data-component="progress"
+Category: core
+Props: value: number = 0, max: number = 100, class: string = ""
+Slots: none
+Events: none
+
+### ProgressBar
+Mount: data-component="ProgressBar"
+Category: core
+Props: class: string = "", value: number = 0, max: number = 100, label: string = "Progress", showValue: boolean = true
+Slots: none
+Events: none
+
+### ProgressChart
+Mount: data-component="ProgressChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ProgressRing
+Mount: data-component="ProgressRing"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ProgressSlider
+Mount: data-component="ProgressSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProjectCard
+Mount: data-component="ProjectCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProjectSelector
+Mount: data-component="ProjectSelector"
+Category: forms
+Props: label: string = "Project", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ProjectSwitcher
+Mount: data-component="ProjectSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PromoCodeInput
+Mount: data-component="PromoCodeInput"
+Category: forms
+Props: label: string = "PromoCode", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PromptDialog
+Mount: data-component="PromptDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### ProviderSelector
+Mount: data-component="ProviderSelector"
+Category: forms
+Props: label: string = "Provider", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PublicFooter
+Mount: data-component="PublicFooter"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: submit
+
+### PublicHeader
+Mount: data-component="PublicHeader"
+Category: layout
+Props: class: string = ""
+Slots: none
+Events: click
+
+### PublicHeaderLogo
+Mount: data-component="PublicHeaderLogo"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PublicMobileNavigation
+Mount: data-component="PublicMobileNavigation"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: click
+
+### PublicPageShell
+Mount: data-component="PublicPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### PublicSearch
+Mount: data-component="PublicSearch"
+Category: core
+Props: class: string = "", query: string = "", placeholder: string = "Search...", label: string = "Search", action: string = "", method: string = "get", name: string = "q", buttonLabel: string = "", clearLabel: string = "Clear search", size: string = "default", centered: boolean = false, fullWidth: boolean = false, showShortcut: boolean = false, shortcutLabel: string = "⌘ K", suggestions: string = []
+Slots: none
+Events: input, focus, blur, click
+
+### PublishDateTimePicker
+Mount: data-component="PublishDateTimePicker"
+Category: forms
+Props: label: string = "PublishDateTime", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PushComposer
+Mount: data-component="PushComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### PushNotificationEditor
+Mount: data-component="PushNotificationEditor"
+Category: forms
+Props: label: string = "PushNotification", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### QrCode
+Mount: data-component="QrCode"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### QuantityInput
+Mount: data-component="QuantityInput"
+Category: forms
+Props: label: string = "Quantity", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### QuantityStepper
+Mount: data-component="QuantityStepper"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### QuietHoursPicker
+Mount: data-component="QuietHoursPicker"
+Category: forms
+Props: label: string = "Quiet hours", startName: string = "quietStart", endName: string = "quietEnd", start: string = "22:00", end: string = "08:00", timezone: string = "UTC", disabled: boolean = false, class: string = ""
+Slots: none
+Events: none
+
+### QuoteText
+Mount: data-component="QuoteText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### Radio
+Mount: data-component="Radio"
+Category: core
+Props: class: string = "", id: string = "", name: string = "choice", value: string = "", label: string = "Option", description: string = "", checked: boolean = false, disabled: boolean = false
+Slots: none
+Events: none
+
+### RadioGroup
+Mount: data-component="RadioGroup"
+Category: forms
+Props: class: string = "", label: string = "Choose one", name: string = "choice"
+Slots: default
+Events: none
+
+### RangeInput
+Mount: data-component="RangeInput"
+Category: forms
+Props: label: string = "Range", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RangeSlider
+Mount: data-component="RangeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RateLimitedState
+Mount: data-component="RateLimitedState"
+Category: feedback
+Props: label: string = "RateLimited", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### RateLimitInput
+Mount: data-component="RateLimitInput"
+Category: forms
+Props: label: string = "RateLimit", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RateLimitPage
+Mount: data-component="RateLimitPage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RateTable
+Mount: data-component="RateTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### RatingSlider
+Mount: data-component="RatingSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RecipientSelector
+Mount: data-component="RecipientSelector"
+Category: forms
+Props: label: string = "Recipient", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RecoveryCodeForm
+Mount: data-component="RecoveryCodeForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RecoveryCodeInput
+Mount: data-component="RecoveryCodeInput"
+Category: forms
+Props: label: string = "RecoveryCode", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RecurrenceRuleBuilder
+Mount: data-component="RecurrenceRuleBuilder"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RecurringSchedulePicker
+Mount: data-component="RecurringSchedulePicker"
+Category: forms
+Props: id: string = "recurring-schedule", name: string = "recurrence", label: string = "Repeat", value: string = "none", disabled: boolean = false, class: string = ""
+Slots: none
+Events: none
+
+### RedirectUriInput
+Mount: data-component="RedirectUriInput"
+Category: forms
+Props: label: string = "RedirectUri", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ReferenceInput
+Mount: data-component="ReferenceInput"
+Category: forms
+Props: label: string = "Reference", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RegexInput
+Mount: data-component="RegexInput"
+Category: forms
+Props: label: string = "Regex", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RegionalPrivacyBanner
+Mount: data-component="RegionalPrivacyBanner"
+Category: feedback
+Props: label: string = "RegionalPrivacy", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### RegionAvailabilityTable
+Mount: data-component="RegionAvailabilityTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### RegionSelector
+Mount: data-component="RegionSelector"
+Category: forms
+Props: label: string = "Region", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RegionUnavailableAlert
+Mount: data-component="RegionUnavailableAlert"
+Category: feedback
+Props: label: string = "RegionUnavailable", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### RegionUnavailableState
+Mount: data-component="RegionUnavailableState"
+Category: feedback
+Props: label: string = "RegionUnavailable", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### RejectOptionalCookiesButton
+Mount: data-component="RejectOptionalCookiesButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ReopenCookieSettingsButton
+Mount: data-component="ReopenCookieSettingsButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ReportCard
+Mount: data-component="ReportCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RequestResponseViewer
+Mount: data-component="RequestResponseViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RequestViewer
+Mount: data-component="RequestViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RequiredIndicator
+Mount: data-component="RequiredIndicator"
+Category: feedback
+Props: label: string = "Required", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ResetPasswordForm
+Mount: data-component="ResetPasswordForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ResizablePanel
+Mount: data-component="ResizablePanel"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ResourceCard
+Mount: data-component="ResourceCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ResourceDownloadCard
+Mount: data-component="ResourceDownloadCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ResourcePageShell
+Mount: data-component="ResourcePageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ResourceSearch
+Mount: data-component="ResourceSearch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ResourcesMegaMenu
+Mount: data-component="ResourcesMegaMenu"
+Category: overlays
+Props: class: string = ""
+Slots: none
+Events: none
+
+### ResourceTypeBadge
+Mount: data-component="ResourceTypeBadge"
+Category: feedback
+Props: label: string = "ResourceType", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ResponseViewer
+Mount: data-component="ResponseViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ResponsibleDisclosureCTA
+Mount: data-component="ResponsibleDisclosureCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ResponsiveTable
+Mount: data-component="ResponsiveTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ResultsSection
+Mount: data-component="ResultsSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### RetentionTable
+Mount: data-component="RetentionTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### RetryCountInput
+Mount: data-component="RetryCountInput"
+Category: forms
+Props: label: string = "RetryCount", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RevenueChart
+Mount: data-component="RevenueChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### RgbColorInput
+Mount: data-component="RgbColorInput"
+Category: forms
+Props: label: string = "RgbColor", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RichTextEditor
+Mount: data-component="RichTextEditor"
+Category: forms
+Props: label: string = "RichText", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RichTextInput
+Mount: data-component="RichTextInput"
+Category: forms
+Props: label: string = "RichText", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RoleSelector
+Mount: data-component="RoleSelector"
+Category: forms
+Props: label: string = "Role", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### RollingDateRangePicker
+Mount: data-component="RollingDateRangePicker"
+Category: forms
+Props: label: string = "RollingDateRange", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SaveCookiePreferencesButton
+Mount: data-component="SaveCookiePreferencesButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SavedFilterSelector
+Mount: data-component="SavedFilterSelector"
+Category: forms
+Props: label: string = "SavedFilter", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ScheduledDateTimePicker
+Mount: data-component="ScheduledDateTimePicker"
+Category: forms
+Props: label: string = "ScheduledDateTime", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ScheduleMessagePicker
+Mount: data-component="ScheduleMessagePicker"
+Category: forms
+Props: label: string = "ScheduleMessage", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SchedulePicker
+Mount: data-component="SchedulePicker"
+Category: forms
+Props: class: string = "", label: string = "Schedule"
+Slots: none
+Events: none
+
+### ScreenshotFrame
+Mount: data-component="ScreenshotFrame"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### ScrollArea
+Mount: data-component="ScrollArea"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### SDKCard
+Mount: data-component="SDKCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SdkLanguageSelector
+Mount: data-component="SdkLanguageSelector"
+Category: forms
+Props: label: string = "SdkLanguage", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SDKLanguageTabs
+Mount: data-component="SDKLanguageTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SDKTabs
+Mount: data-component="SDKTabs"
+Category: core
+Props: label: string = "SDK languages", tabs: string = [], defaultIndex: number = 0, class: string = ""
+Slots: none
+Events: click
+
+### SearchButton
+Mount: data-component="SearchButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SearchCategoryTabs
+Mount: data-component="SearchCategoryTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SearchDialog
+Mount: data-component="SearchDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### SearchEmptyState
+Mount: data-component="SearchEmptyState"
+Category: feedback
+Props: label: string = "SearchEmpty", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### SearchInput
+Mount: data-component="SearchInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "Search", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### SearchLoadingState
+Mount: data-component="SearchLoadingState"
+Category: feedback
+Props: label: string = "SearchLoading", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### SearchResultItem
+Mount: data-component="SearchResultItem"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SecondaryButton
+Mount: data-component="SecondaryButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SecondPicker
+Mount: data-component="SecondPicker"
+Category: forms
+Props: label: string = "Second", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SecretDisplay
+Mount: data-component="SecretDisplay"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SecretInput
+Mount: data-component="SecretInput"
+Category: forms
+Props: label: string = "Secret", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SecretRevealDialog
+Mount: data-component="SecretRevealDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### Section
+Mount: data-component="Section"
+Category: layout
+Props: id: string = "", size: string = "default", surface: string = "default", className: string = ""
+Slots: default
+Events: none
+
+### SectionActions
+Mount: data-component="SectionActions"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SectionHeader
+Mount: data-component="SectionHeader"
+Category: layout
+Props: class: string = "", eyebrow: string = "", title: string = "Section title", description: string = "", align: string = "left"
+Slots: default
+Events: none
+
+### SectionHeading
+Mount: data-component="SectionHeading"
+Category: core
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SecurityAlert
+Mount: data-component="SecurityAlert"
+Category: feedback
+Props: label: string = "Security", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### SecurityContactCard
+Mount: data-component="SecurityContactCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SecurityFeatureCard
+Mount: data-component="SecurityFeatureCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SecurityHero
+Mount: data-component="SecurityHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SecurityPillarGrid
+Mount: data-component="SecurityPillarGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### SecurityPracticeList
+Mount: data-component="SecurityPracticeList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### SecurityReportForm
+Mount: data-component="SecurityReportForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Select
+Mount: data-component="Select"
+Category: core
+Props: class: string = "", id: string = "", name: string = "", label: string = "Select", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false
+Slots: default
+Events: none
+
+### SenderIdInput
+Mount: data-component="SenderIdInput"
+Category: forms
+Props: label: string = "SenderId", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ServerErrorPage
+Mount: data-component="ServerErrorPage"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ServiceLevelTable
+Mount: data-component="ServiceLevelTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ServiceStatusBadge
+Mount: data-component="ServiceStatusBadge"
+Category: feedback
+Props: label: string = "ServiceStatus", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### ServiceStatusList
+Mount: data-component="ServiceStatusList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### ServiceStatusRow
+Mount: data-component="ServiceStatusRow"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### SessionCard
+Mount: data-component="SessionCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SessionExpiredDialog
+Mount: data-component="SessionExpiredDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### SetupChecklist
+Mount: data-component="SetupChecklist"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SeveritySelector
+Mount: data-component="SeveritySelector"
+Category: forms
+Props: label: string = "Severity", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ShadowPicker
+Mount: data-component="ShadowPicker"
+Category: forms
+Props: label: string = "Shadow", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ShareAction
+Mount: data-component="ShareAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ShareButton
+Mount: data-component="ShareButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SidebarLayout
+Mount: data-component="SidebarLayout"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### SidePanel
+Mount: data-component="SidePanel"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SignInForm
+Mount: data-component="SignInForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SignInLink
+Mount: data-component="SignInLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SignUpForm
+Mount: data-component="SignUpForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SiteSearch
+Mount: data-component="SiteSearch"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Skeleton
+Mount: data-component="Skeleton"
+Category: feedback
+Props: height: string = "4", rounded: string = "lg", className: string = ""
+Slots: none
+Events: none
+
+### SkipLink
+Mount: data-component="SkipLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SlaTable
+Mount: data-component="SlaTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### Slider
+Mount: data-component="Slider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SlugInput
+Mount: data-component="SlugInput"
+Category: forms
+Props: label: string = "Slug", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SmallText
+Mount: data-component="SmallText"
+Category: content
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SmartRouteDiagram
+Mount: data-component="SmartRouteDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SmsComposer
+Mount: data-component="SmsComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SmsMessageEditor
+Mount: data-component="SmsMessageEditor"
+Category: forms
+Props: label: string = "SmsMessage", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SmsSegmentCounter
+Mount: data-component="SmsSegmentCounter"
+Category: feedback
+Props: label: string = "SmsSegment", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### SocialShare
+Mount: data-component="SocialShare"
+Category: core
+Props: class: string = "", title: string = "Share this page", description: string = "", url: string = "", shareText: string = "", centered: boolean = false, compact: boolean = false, showTitle: boolean = true, showCopy: boolean = true, networks: string = []
+Slots: none
+Events: click
+
+### SolutionHero
+Mount: data-component="SolutionHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SolutionPageShell
+Mount: data-component="SolutionPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SolutionSection
+Mount: data-component="SolutionSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SolutionsMegaMenu
+Mount: data-component="SolutionsMegaMenu"
+Category: overlays
+Props: class: string = ""
+Slots: none
+Events: none
+
+### SortableTable
+Mount: data-component="SortableTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### spacer
+Mount: data-component="spacer"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: none
+
+### Spinner
+Mount: data-component="Spinner"
+Category: core
+Props: class: string = "", label: string = "Loading", size: string = "md"
+Slots: none
+Events: none
+
+### SplitButton
+Mount: data-component="SplitButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SplitCTA
+Mount: data-component="SplitCTA"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### SplitHero
+Mount: data-component="SplitHero"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SplitLayout
+Mount: data-component="SplitLayout"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### SplitSectionHeader
+Mount: data-component="SplitSectionHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### Stack
+Mount: data-component="Stack"
+Category: core
+Props: gap: string = "4", className: string = ""
+Slots: default
+Events: none
+
+### StartFreeButton
+Mount: data-component="StartFreeButton"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### StatCard
+Mount: data-component="StatCard"
+Category: content
+Props: class: string = "", label: string = "Metric", value: string = "0", change: string = "", trend: string = "neutral"
+Slots: none
+Events: none
+
+### StateSelector
+Mount: data-component="StateSelector"
+Category: forms
+Props: label: string = "State", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### StatusBadge
+Mount: data-component="StatusBadge"
+Category: feedback
+Props: class: string = "", status: string = "operational"
+Slots: none
+Events: none
+
+### StatusBanner
+Mount: data-component="StatusBanner"
+Category: core
+Props: class: string = "", type: string = "info", title: string = "", description: string = "", actionLabel: string = "", actionHref: string = "", dismissible: boolean = true, compact: boolean = false, details: string = []
+Slots: none
+Events: click
+
+### StatusPageShell
+Mount: data-component="StatusPageShell"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### StatusSelector
+Mount: data-component="StatusSelector"
+Category: forms
+Props: label: string = "Status", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### StatusSubscribeForm
+Mount: data-component="StatusSubscribeForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### StatusTable
+Mount: data-component="StatusTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### StepNavigation
+Mount: data-component="StepNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### Stepper
+Mount: data-component="Stepper"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### StepperInput
+Mount: data-component="StepperInput"
+Category: forms
+Props: label: string = "Stepper", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### StepUpAuthenticationDialog
+Mount: data-component="StepUpAuthenticationDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### StickerPicker
+Mount: data-component="StickerPicker"
+Category: forms
+Props: label: string = "Sticker", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Sticky
+Mount: data-component="Sticky"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### StickyLayout
+Mount: data-component="StickyLayout"
+Category: layout
+Props: class: string = ""
+Slots: default
+Events: none
+
+### StreetAddressInput
+Mount: data-component="StreetAddressInput"
+Category: forms
+Props: label: string = "StreetAddress", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SubdomainInput
+Mount: data-component="SubdomainInput"
+Category: forms
+Props: label: string = "Subdomain", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SubjectInput
+Mount: data-component="SubjectInput"
+Category: forms
+Props: label: string = "Subject", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SubprocessorTable
+Mount: data-component="SubprocessorTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### SubsectionHeading
+Mount: data-component="SubsectionHeading"
+Category: core
+Props: text: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### SuccessCard
+Mount: data-component="SuccessCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### SuccessState
+Mount: data-component="SuccessState"
+Category: feedback
+Props: label: string = "Success", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### SupportRequestForm
+Mount: data-component="SupportRequestForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Surface
+Mount: data-component="Surface"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### Switch
+Mount: data-component="Switch"
+Category: core
+Props: class: string = "", id: string = "", name: string = "", label: string = "Switch", description: string = "", checked: boolean = false, disabled: boolean = false
+Slots: none
+Events: click
+
+### Table
+Mount: data-component="Table"
+Category: data
+Props: class: string = "", caption: string = "Data table", responsive: boolean = true
+Slots: default
+Events: none
+
+### TableHeader
+Mount: data-component="TableHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### TableRow
+Mount: data-component="TableRow"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### TableSkeleton
+Mount: data-component="TableSkeleton"
+Category: feedback
+Props: label: string = "Table", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### Tabs
+Mount: data-component="Tabs"
+Category: content
+Props: class: string = "", active: string = "first"
+Slots: first, second
+Events: click
+
+### tag
+Mount: data-component="tag"
+Category: core
+Props: label: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### TagInput
+Mount: data-component="TagInput"
+Category: forms
+Props: label: string = "Tag", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TaxNotice
+Mount: data-component="TaxNotice"
+Category: feedback
+Props: label: string = "Tax", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### TaxRateInput
+Mount: data-component="TaxRateInput"
+Category: forms
+Props: label: string = "TaxRate", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TeamMemberCard
+Mount: data-component="TeamMemberCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TeamSizeSelector
+Mount: data-component="TeamSizeSelector"
+Category: forms
+Props: label: string = "TeamSize", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TemplateCard
+Mount: data-component="TemplateCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TemplateSelector
+Mount: data-component="TemplateSelector"
+Category: forms
+Props: label: string = "Template", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TemplateVariableInput
+Mount: data-component="TemplateVariableInput"
+Category: forms
+Props: label: string = "TemplateVariable", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TenantIsolationDiagram
+Mount: data-component="TenantIsolationDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### TerminalBlock
+Mount: data-component="TerminalBlock"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TertiaryButton
+Mount: data-component="TertiaryButton"
+Category: actions
+Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### TestimonialCard
+Mount: data-component="TestimonialCard"
+Category: content
+Props: class: string = "", quote: string = "Great product.", name: string = "Customer", role: string = "", company: string = "", avatar: string = ""
+Slots: none
+Events: none
+
+### TestimonialCarousel
+Mount: data-component="TestimonialCarousel"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TestMessageDialog
+Mount: data-component="TestMessageDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### Textarea
+Mount: data-component="Textarea"
+Category: core
+Props: class: string = "", id: string = "", name: string = "", label: string = "Message", value: string = "", placeholder: string = "", rows: number = 5, help: string = "", error: string = "", required: boolean = false, disabled: boolean = false
+Slots: none
+Events: none
+
+### TextInput
+Mount: data-component="TextInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "Text", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### TextLink
+Mount: data-component="TextLink"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### TextSkeleton
+Mount: data-component="TextSkeleton"
+Category: feedback
+Props: label: string = "Text", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### theme-toggle
+Mount: data-component="theme-toggle"
+Category: core
+Props: label: string = "Toggle theme", class: string = ""
+Slots: default
+Events: none
+
+### ThemeColorPicker
+Mount: data-component="ThemeColorPicker"
+Category: forms
+Props: label: string = "ThemeColor", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ThemeSwitcher
+Mount: data-component="ThemeSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TimeInput
+Mount: data-component="TimeInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "Time", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### Timeline
+Mount: data-component="Timeline"
+Category: visualization
+Props: class: string = "", title: string = "Timeline"
+Slots: default
+Events: none
+
+### TimelineChart
+Mount: data-component="TimelineChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### TimelineItem
+Mount: data-component="TimelineItem"
+Category: content
+Props: class: string = "", title: string = "Event", date: string = "", description: string = "", status: string = "default"
+Slots: none
+Events: none
+
+### TimeoutInput
+Mount: data-component="TimeoutInput"
+Category: forms
+Props: label: string = "Timeout", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TimePicker
+Mount: data-component="TimePicker"
+Category: forms
+Props: id: string = "time-picker", name: string = "time", label: string = "Time", value: string = "", min: string = "", max: string = "", step: number = 60, required: boolean = false, disabled: boolean = false, class: string = ""
+Slots: none
+Events: none
+
+### TimeRangePicker
+Mount: data-component="TimeRangePicker"
+Category: forms
+Props: label: string = "TimeRange", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TimezoneAwareTimePicker
+Mount: data-component="TimezoneAwareTimePicker"
+Category: forms
+Props: label: string = "TimezoneAwareTime", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TimezoneSelector
+Mount: data-component="TimezoneSelector"
+Category: forms
+Props: class: string = "", id: string = "timezone", name: string = "timezone", label: string = "Timezone"
+Slots: none
+Events: none
+
+### Toast
+Mount: data-component="Toast"
+Category: core
+Props: class: string = "", title: string = "Saved", description: string = "", variant: string = "success", duration: number = 5000
+Slots: none
+Events: click
+
+### ToastAction
+Mount: data-component="ToastAction"
+Category: actions
+Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### ToastHost
+Mount: data-component="ToastHost"
+Category: core
+Props: class: string = ""
+Slots: none
+Events: click
+
+### ToastIcon
+Mount: data-component="ToastIcon"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ToastProgress
+Mount: data-component="ToastProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### Toggle
+Mount: data-component="Toggle"
+Category: forms
+Props: label: string = "", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ToggleGroup
+Mount: data-component="ToggleGroup"
+Category: forms
+Props: label: string = "Toggle", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TokenInput
+Mount: data-component="TokenInput"
+Category: forms
+Props: label: string = "Token", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Tooltip
+Mount: data-component="Tooltip"
+Category: content
+Props: class: string = "", text: string = "Helpful information", position: string = "top"
+Slots: default
+Events: none
+
+### TotpVerificationForm
+Mount: data-component="TotpVerificationForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TranslatedText
+Mount: data-component="TranslatedText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TreeTable
+Mount: data-component="TreeTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### TrendIndicator
+Mount: data-component="TrendIndicator"
+Category: feedback
+Props: label: string = "Trend", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### TruncatedText
+Mount: data-component="TruncatedText"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### TrustBadgeList
+Mount: data-component="TrustBadgeList"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### Typography
+Mount: data-component="Typography"
+Category: core
+Props: as: string = "p", variant: string = "body", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### UnavailableRegionState
+Mount: data-component="UnavailableRegionState"
+Category: feedback
+Props: label: string = "UnavailableRegion", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### UnifiedTimelinePreview
+Mount: data-component="UnifiedTimelinePreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### UnsavedChangesDialog
+Mount: data-component="UnsavedChangesDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### UploadItem
+Mount: data-component="UploadItem"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### UploadPreview
+Mount: data-component="UploadPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### UploadProgress
+Mount: data-component="UploadProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### UptimeChart
+Mount: data-component="UptimeChart"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### UptimeMetric
+Mount: data-component="UptimeMetric"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### UrlInput
+Mount: data-component="UrlInput"
+Category: forms
+Props: class: string = "", id: string = "", name: string = "", label: string = "Url", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
+Slots: none
+Events: none
+
+### UsagePricingTable
+Mount: data-component="UsagePricingTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### UseCaseSelector
+Mount: data-component="UseCaseSelector"
+Category: forms
+Props: label: string = "UseCase", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### UserCard
+Mount: data-component="UserCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### UsernameInput
+Mount: data-component="UsernameInput"
+Category: forms
+Props: label: string = "Username", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ValueCard
+Mount: data-component="ValueCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ValuesGrid
+Mount: data-component="ValuesGrid"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### VerificationCodeInput
+Mount: data-component="VerificationCodeInput"
+Category: forms
+Props: label: string = "VerificationCode", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VerifiedBadge
+Mount: data-component="VerifiedBadge"
+Category: feedback
+Props: label: string = "Verified", variant: string = "default", class: string = ""
+Slots: default
+Events: none
+
+### VersionSelector
+Mount: data-component="VersionSelector"
+Category: forms
+Props: label: string = "Version", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VerticalTabs
+Mount: data-component="VerticalTabs"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VideoCard
+Mount: data-component="VideoCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VideoPreviewDialog
+Mount: data-component="VideoPreviewDialog"
+Category: overlays
+Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
+Slots: default
+Events: none
+
+### VideoUpload
+Mount: data-component="VideoUpload"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VirtualizedTable
+Mount: data-component="VirtualizedTable"
+Category: data
+Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
+Slots: default
+Events: none
+
+### VisionSection
+Mount: data-component="VisionSection"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### VisuallyHidden
+Mount: data-component="VisuallyHidden"
+Category: core
+Props: className: string = ""
+Slots: default
+Events: none
+
+### VoiceScriptComposer
+Mount: data-component="VoiceScriptComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VoiceScriptEditor
+Mount: data-component="VoiceScriptEditor"
+Category: forms
+Props: label: string = "VoiceScript", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VolumeInput
+Mount: data-component="VolumeInput"
+Category: forms
+Props: label: string = "Volume", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### VolumeSlider
+Mount: data-component="VolumeSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WarningCard
+Mount: data-component="WarningCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WebhookEventCard
+Mount: data-component="WebhookEventCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WebhookFlowDiagram
+Mount: data-component="WebhookFlowDiagram"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### WebhookPayloadViewer
+Mount: data-component="WebhookPayloadViewer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WebhookUrlInput
+Mount: data-component="WebhookUrlInput"
+Category: forms
+Props: label: string = "WebhookUrl", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WebinarCard
+Mount: data-component="WebinarCard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WebinarRegistrationForm
+Mount: data-component="WebinarRegistrationForm"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### Well
+Mount: data-component="Well"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### WhatsAppComposer
+Mount: data-component="WhatsAppComposer"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WhatsAppNumberInput
+Mount: data-component="WhatsAppNumberInput"
+Category: forms
+Props: label: string = "WhatsAppNumber", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WhatsAppTemplateEditor
+Mount: data-component="WhatsAppTemplateEditor"
+Category: forms
+Props: label: string = "WhatsAppTemplate", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WideContainer
+Mount: data-component="WideContainer"
+Category: core
+Props: class: string = ""
+Slots: default
+Events: none
+
+### Wizard
+Mount: data-component="Wizard"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WizardHeader
+Mount: data-component="WizardHeader"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### WizardNavigation
+Mount: data-component="WizardNavigation"
+Category: layout
+Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
+Slots: default
+Events: none
+
+### WorkflowCanvasPreview
+Mount: data-component="WorkflowCanvasPreview"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WorkflowProgress
+Mount: data-component="WorkflowProgress"
+Category: visualization
+Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
+Slots: default
+Events: none
+
+### WorkspaceCard
+Mount: data-component="WorkspaceCard"
+Category: content
+Props: title: string = "", description: string = "", href: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WorkspaceSelector
+Mount: data-component="WorkspaceSelector"
+Category: forms
+Props: label: string = "Workspace", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### WorkspaceSwitcher
+Mount: data-component="WorkspaceSwitcher"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
+### YearPicker
+Mount: data-component="YearPicker"
+Category: forms
+Props: label: string = "Year", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
+Slots: default
+Events: none
+
+### ZoomSlider
+Mount: data-component="ZoomSlider"
+Category: content
+Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
+Slots: default
+Events: none
+
 # Installed package documentation
 
 The following README files and declarations come from the installed private 0.2.64 release.
diff --git a/scripts/generate-docs.ts b/scripts/generate-docs.ts
index 8298856f..2322bb2b 100644
--- a/scripts/generate-docs.ts
+++ b/scripts/generate-docs.ts
@@ -1,4 +1,4 @@
-import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from "node:fs";
 import { join, resolve } from "node:path";
 
 const root = resolve(import.meta.dir, "..");
@@ -9,7 +9,9 @@ const frameworkVersion = projectPackage.wrnexus?.version;
 if (!frameworkVersion) throw new Error("package.json is missing wrnexus.version");
 const pages = join(root, "app", "pages");
 const packagePages = join(pages, "packages");
+const componentPages = join(pages, "components");
 mkdirSync(packagePages, { recursive: true });
+mkdirSync(componentPages, { recursive: true });
 
 interface UiComponentReference {
   count: number;
@@ -21,6 +23,7 @@ interface UiComponentReference {
     props: Array<{ name: string; type: string; required: boolean; default: string | null }>;
     slots: string[];
     events: string[];
+    source: string;
   }>;
 }
 
@@ -259,10 +262,10 @@ ${state}
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
         <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v${frameworkVersion}</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
+      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
       ${content}
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS ${frameworkVersion}</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
@@ -320,42 +323,103 @@ for (const [name, category, summary] of catalog) {
   const guide = markdown(readme);
   const componentReference =
     name === "ui" && uiReference
-      ? `<section id="components" class="prose ui-component-reference"><h2>All ${uiReference.count} UI components and props</h2><p>This reference is generated from the exact installed <code>.wrn</code> sources. Required props have no default; optional props show their default value.</p>${[
-          ...new Set(uiReference.components.map((component) => component.category)),
-        ]
-          .sort()
-          .map(
-            (componentCategory) =>
-              `<h3>${escape(componentCategory[0]!.toUpperCase() + componentCategory.slice(1))}</h3><div class="table-wrap"><table><thead><tr><th>Component</th><th>Props</th><th>Slots</th><th>Events</th></tr></thead><tbody>${uiReference.components
-                .filter((component) => component.category === componentCategory)
-                .map(
-                  (component) =>
-                    `<tr><td><strong>${escape(component.name)}</strong><br><code>data-component=&quot;${escape(component.mount)}&quot;</code><br><small>${escape(component.purpose)}</small></td><td>${component.props.length ? component.props.map((prop) => `<code>${escape(prop.name)}: ${escape(prop.type)}${prop.required ? " (required)" : ` = ${escape(prop.default ?? "")}`}</code>`).join("<br>") : "None"}</td><td>${component.slots.length ? component.slots.map((slot) => `<code>${escape(slot)}</code>`).join("<br>") : "None"}</td><td>${component.events.length ? component.events.map((event) => `<code>${escape(event)}</code>`).join("<br>") : "None"}</td></tr>`,
-                )
-                .join("")}</tbody></table></div>`,
-          )
-          .join("")}</section>`
+      ? `<section class="prose component-catalog-callout"><h2>Explore the component library</h2><p>The component reference now has a dedicated catalog with searchable cards and one complete page per component.</p><p><a class="primary" href="/components">Browse all ${uiReference.count} components →</a></p></section>`
       : "";
   const toc = [
     { id: "guide", title: "Guide", level: 2 },
     ...guide.headings,
     { id: "api", title: "Complete API", level: 2 },
     { id: "examples", title: "Examples", level: 2 },
-    ...(componentReference ? [{ id: "components", title: "All UI components", level: 2 }] : []),
   ]
     .map(
       (heading) =>
         `<a class="toc-level-${heading.level}" href="#${heading.id}">${escape(heading.title)}</a>`,
     )
     .join("");
-  const content = `<main class="page package-page">
-      <aside class="sidebar"><a href="/packages">← All packages</a><span class="category">${category}</span><h2>@wrnexus/${name}</h2><p>${summary}</p><span class="status status-beta">Private preview · ${frameworkVersion}</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
-      <article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">${category} · Preview</span><h1>@wrnexus/${name}</h1><p>${summary}</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/${name}@${frameworkVersion}</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose">${guide.html}</section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>${escape(types)}</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid">${examplesFrom(readme, name)}</div></section>${componentReference}</article>
+  const content = `<main class="portal-main docs-layout">
+      <article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/${name}</span></nav><section class="doc-intro"><span class="eyebrow">${category} · Package reference</span><h1>@wrnexus/${name}</h1><p>${summary}</p><div class="doc-meta"><span>v${frameworkVersion}</span><span>Private registry</span><span>${category}</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/${name}@${frameworkVersion}</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide">${guide.html}</section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>${escape(types)}</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid">${examplesFrom(readme, name)}</div></section>${componentReference}</article>
       <aside class="on-this-page"><h2>On this page</h2><nav>${toc}</nav></aside>
     </main>`;
   writeFileSync(join(packagePages, `${name}.wrn`), shell(`@wrnexus/${name}`, summary, content));
 }
 
+if (!uiReference) throw new Error("Install @wrnexus/ui before generating component documentation");
+
+const componentSlug = (name: string) =>
+  (name === "file-upload" ? "file-upload-primitive" : name)
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .replace(/[^a-zA-Z0-9]+/g, "-")
+    .replace(/^-|-$/g, "")
+    .toLowerCase();
+const componentCategories = [
+  ...new Set(uiReference.components.map((item) => item.category)),
+].sort();
+const componentCards = uiReference.components
+  .map(
+    (item) =>
+      `<a class="component-card" href="/components/${componentSlug(item.name)}" data-show="(category === 'All' ? true : category === '${item.category}') ? (query === '' ? true : '${escape(`${item.name} ${item.mount} ${item.category} ${item.purpose}`.toLowerCase())}'.includes(query.toLowerCase())) : false"><span class="category">${escape(item.category)}</span><h2>${escape(item.name)}</h2><p>${escape(item.purpose)}</p><div class="component-card-meta"><span>${item.props.length} props</span><span>${item.slots.length} slots</span><span>${item.events.length} events</span></div><span class="card-link">View component →</span></a>`,
+  )
+  .join("\n");
+const componentFilters = ["All", ...componentCategories]
+  .map(
+    (category) =>
+      `<button type="button" @click="category = '${category}'">${escape(category[0]!.toUpperCase() + category.slice(1))}<span>${category === "All" ? uiReference.count : uiReference.components.filter((item) => item.category === category).length}</span></button>`,
+  )
+  .join("");
+
+writeFileSync(
+  join(pages, "components.wrn"),
+  shell(
+    "Components",
+    `Browse all ${uiReference.count} themeable WRNexusJS UI components, props, slots, events, and examples.`,
+    `<main id="main" class="page component-catalog-page"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><span aria-current="page">Components</span></nav><section class="hero compact"><span class="eyebrow">@wrnexus/ui · ${uiReference.count} components</span><h1>Component reference</h1><p>Production-ready, server-rendered components documented directly from the installed <code>.wrn</code> sources.</p><input class="search" type="search" placeholder="Search components, props, or categories…" @input="query = event.target.value" /></section><section class="category-filter" aria-label="Filter components by category"><div class="category-row">${componentFilters}</div><p>Showing <strong>{category}</strong> components</p></section><section class="component-grid">${componentCards}</section></main>`,
+    '  state query = ""\n  state category = "All"\n',
+  ),
+);
+
+const currentComponentFiles = new Set<string>();
+for (const item of uiReference.components) {
+  const slug = componentSlug(item.name);
+  currentComponentFiles.add(`${slug}.wrn`);
+  const sourcePath = join(root, "node_modules", "@wrnexus", "ui", item.source);
+  const source = existsSync(sourcePath) ? readFileSync(sourcePath, "utf8") : "";
+  const exampleAttributes = item.props
+    .filter((prop) => prop.required || !["class", "className"].includes(prop.name))
+    .slice(0, 5)
+    .map((prop) => {
+      const value = prop.required
+        ? prop.type === "boolean"
+          ? "true"
+          : prop.type === "number"
+            ? "1"
+            : prop.type.includes("[]")
+              ? "[]"
+              : prop.name
+        : (prop.default ?? "").replace(/^"|"$/g, "");
+      return `${prop.name}="${value || prop.name}"`;
+    })
+    .join(" ");
+  const example = `<${item.mount}${exampleAttributes ? ` ${exampleAttributes}` : ""} />`;
+  const propsRows = item.props.length
+    ? item.props
+        .map(
+          (prop) =>
+            `<tr><td><code>${escape(prop.name)}</code></td><td><code>${escape(prop.type)}</code></td><td>${prop.required ? '<span class="required">Required</span>' : "Optional"}</td><td><code>${prop.default === null ? "—" : escape(prop.default)}</code></td></tr>`,
+        )
+        .join("")
+    : '<tr><td colspan="4">This component has no props.</td></tr>';
+  const content = `<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">${escape(item.name)}</span></nav><section class="doc-intro"><span class="eyebrow">${escape(item.category)} component</span><h1>${escape(item.name)}</h1><p>${escape(item.purpose)}</p><div class="doc-meta"><span>@wrnexus/ui ${frameworkVersion}</span><span>${item.props.length} props</span><span>${item.slots.length} slots</span><span>${item.events.length} events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>${escape(example)}</code></pre><p>Legacy mount name: <code>data-component=&quot;${escape(item.mount)}&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody>${propsRows}</tbody></table></div></section><section id="slots"><h2>Slots</h2>${item.slots.length ? `<ul>${item.slots.map((slot) => `<li><code>${escape(slot)}</code></li>`).join("")}</ul>` : "<p>This component does not declare a slot.</p>"}</section><section id="events"><h2>Events</h2>${item.events.length ? `<ul>${item.events.map((event) => `<li><code>${escape(event)}</code></li>`).join("")}</ul>` : "<p>This component does not declare a custom event.</p>"}</section><section id="source"><h2>Source contract</h2><p>Installed source: <code>${escape(item.source)}</code></p><pre data-language="wrn"><code>${escape(source)}</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>`;
+  writeFileSync(
+    join(componentPages, `${slug}.wrn`),
+    shell(`${item.name} component`, item.purpose, content),
+  );
+}
+for (const file of readdirSync(componentPages)) {
+  if (file.endsWith(".wrn") && !currentComponentFiles.has(file)) {
+    throw new Error(`Stale generated component page: ${file}`);
+  }
+}
+
 writeFileSync(
   join(pages, "index.wrn"),
   shell(
diff --git a/scripts/generate-portal.ts b/scripts/generate-portal.ts
index a62659d8..bc843d84 100644
--- a/scripts/generate-portal.ts
+++ b/scripts/generate-portal.ts
@@ -29,6 +29,12 @@ const uiReference = existsSync(uiReferencePath)
       }>;
     })
   : undefined;
+const componentSlug = (name: string) =>
+  (name === "file-upload" ? "file-upload-primitive" : name)
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .replace(/[^a-zA-Z0-9]+/g, "-")
+    .replace(/^-|-$/g, "")
+    .toLowerCase();
 const uiReferenceText = uiReference
   ? uiReference.components
       .map(
@@ -49,6 +55,7 @@ const code = (s: string) =>
 const navigation = [
   ["/getting-started", "Get started"],
   ["/packages", "Packages"],
+  ["/components", "Components"],
   ["/language", "Language"],
   ["/architecture", "Architecture"],
 ] as const;
@@ -119,8 +126,8 @@ function marketingShell(description: string, body: string) {
   view {
     <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
     <div class="docs-shell marketing-shell">
-      <header class="topbar marketing-header"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v${version}</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme">◐</button></div></header>
-      <div class="marketing-mobile-nav"><details><summary>Menu</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/examples">Examples</a></nav></details></div>
+      <header class="topbar marketing-header"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v${version}</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme">◐</button></div></header>
+      <div class="marketing-mobile-nav"><details><summary>Menu</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/examples">Examples</a></nav></details></div>
       <main id="main" class="marketing-main">${marketingBody}</main>
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS ${version}</strong><span>Build from the server. Ship only what matters.</span></p></div><nav aria-label="Footer"><a href="/getting-started">Documentation</a><a href="/roadmap">Roadmap</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Bun-native · Created by <a href="https://workroot.in/">WorkRoot</a></p></footer>
       <BackToTop />
@@ -464,6 +471,7 @@ const routes = [
   "/architecture",
   "/language",
   "/packages",
+  "/components",
   ...Object.keys(guides).map((x) => `/guides/${x}`),
   "/examples",
   "/showcase",
@@ -477,7 +485,13 @@ const routes = [
   "/search",
   "/404",
 ].filter(Boolean);
-const urls = [...new Set([...routes, ...packageNames.map((x) => `/packages/${x}`)])];
+const urls = [
+  ...new Set([
+    ...routes,
+    ...packageNames.map((x) => `/packages/${x}`),
+    ...(uiReference?.components.map((item) => `/components/${componentSlug(item.name)}`) ?? []),
+  ]),
+];
 writeFileSync(
   join(pub, "robots.txt"),
   `User-agent: *\nAllow: /\nSitemap: https://wrnexusjs.dev/sitemap.xml\n`,